// Track current scroll position and direction
const { position, direction, isScrolling, scrollToTop } = useScrollPosition();Essential for dynamic headers, infinite scrolling, progress indicators, or any scroll-based interactions.
Try scrolling!
Scroll up and down to see the position, direction, and state changes. Perfect for implementing dynamic headers, infinite scrolling, or progress indicators.
This is sample content to enable scrolling. The scroll position hook will track your scrolling behavior as you move through this content.
This is sample content to enable scrolling. The scroll position hook will track your scrolling behavior as you move through this content.
This is sample content to enable scrolling. The scroll position hook will track your scrolling behavior as you move through this content.
This is sample content to enable scrolling. The scroll position hook will track your scrolling behavior as you move through this content.
This is sample content to enable scrolling. The scroll position hook will track your scrolling behavior as you move through this content.
This is sample content to enable scrolling. The scroll position hook will track your scrolling behavior as you move through this content.
This is sample content to enable scrolling. The scroll position hook will track your scrolling behavior as you move through this content.
This is sample content to enable scrolling. The scroll position hook will track your scrolling behavior as you move through this content.
This is sample content to enable scrolling. The scroll position hook will track your scrolling behavior as you move through this content.
This is sample content to enable scrolling. The scroll position hook will track your scrolling behavior as you move through this content.
This is sample content to enable scrolling. The scroll position hook will track your scrolling behavior as you move through this content.
This is sample content to enable scrolling. The scroll position hook will track your scrolling behavior as you move through this content.
This is sample content to enable scrolling. The scroll position hook will track your scrolling behavior as you move through this content.
This is sample content to enable scrolling. The scroll position hook will track your scrolling behavior as you move through this content.
This is sample content to enable scrolling. The scroll position hook will track your scrolling behavior as you move through this content.
This is sample content to enable scrolling. The scroll position hook will track your scrolling behavior as you move through this content.
This is sample content to enable scrolling. The scroll position hook will track your scrolling behavior as you move through this content.
This is sample content to enable scrolling. The scroll position hook will track your scrolling behavior as you move through this content.
This is sample content to enable scrolling. The scroll position hook will track your scrolling behavior as you move through this content.
This is sample content to enable scrolling. The scroll position hook will track your scrolling behavior as you move through this content.
import { useScrollPosition } from '@usegrand/react-hokss';
function ScrollingApp() {
const {
position,
direction,
isScrolling,
scrollToTop,
getScrollPercentage,
isAtBottom,
isAtTop
} = useScrollPosition({
throttle: 16,
trackDirection: true
});
const handleInfiniteScroll = () => {
if (isAtBottom && !isScrolling) {
// Load more content
loadMoreItems();
}
};
const percentage = getScrollPercentage();
return (
<div>
<div className="progress-bar">
<div style={{ width: `${percentage.y}%` }} />
</div>
<p>Scroll position: {position.y}px</p>
<p>Direction: {direction.y}</p>
<p>Progress: {percentage.y}%</p>
<button onClick={scrollToTop}>
Back to Top
</button>
</div>
);
}Configuration options for scroll tracking
Element to track scroll position for (default: window)
Throttle delay in milliseconds (default: 16)
Whether to track scroll direction (default: true)
Threshold for detecting direction changes (default: 1)
Object containing scroll state and control functions
Current scroll position {x, y}
Scroll direction {x, y}
Boolean indicating if currently scrolling
Function to scroll to specific position
Function to scroll to top
Function to scroll to bottom
Function to get scroll percentage
Boolean indicating if scrolled to bottom
Boolean indicating if scrolled to top