useScroll
A React Hook that track the scroll state of target element.
Demo
Source{
"isScrolling": false,
"position": {
"x": 0,
"y": 0
},
"directions": {
"left": false,
"right": false,
"top": false,
"bottom": false
},
"arrivedState": {
"left": true,
"right": false,
"top": true,
"bottom": false
}
}
Usage
See API for more details.
Source
Click links below to view source on GitHub.
API
const scroll = useScroll(elementTarget, options)
ElementTarget
ElementTarget is a union type that represents various kinds of elements that can be targeted.
See ElementTarget or ElementTarget Types for more details.
Options
export interface UseScrollOptions {
/**
* The throttle time (ms) to update the scroll position
*/
throttle?: number
/**
* The idle time (ms) to determine the scroll is stopped
*/
idle?: number
/**
* The offset to determine the scroll has arrived at the edge
*/
offset?: UseScrollOptionsOffset
/**
* The scroll event handler
*/
onScroll?: (event: Event) => void
/**
* The scroll stop event handler
*/
onStop?: (event: Event) => void
/**
* The event listener options
*/
eventListenerOptions?: boolean | AddEventListenerOptions
/**
* The scroll behavior
*/
behavior?: ScrollBehavior
/**
* Whether to trigger the first load immediately
*/
immediate?: boolean
}
Returns
Retuerns contain Pausable instance that can be paused, resumed.
See Pausable for more details.
export interface UseScrollReturns extends Pausable {
/**
* scroll x position
*/
x: number
/**
* scroll y position
*/
y: number
/**
* The scroll position
*/
position: { x: number; y: number }
/**
* The scroll directions
*/
directions: Directions
/**
* Whether the scroll is scrolling
*/
isScrolling: boolean
/**
* The arrived state
*/
arrivedState: ArrivedState
/**
* Scroll to the specified position
*/
scrollTo: (x: number, y: number) => void
/**
* Scroll to the end of the specified direction
*/
scrollToEnd: (direction: 'x' | 'y') => void
/**
* Measure the scroll position
*/
measure(): void
}
