useScroll
用于追踪目标元素滚动状态的 React Hook。
演示
源码{
"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
}
}
用法
请查看 API。
源码
API
const scroll = useScroll(elementTarget, options)
目标元素 ElementTarget
ElementTarget 是一个联合类型，代表可以被定位的各种元素。
更多详情，请参见 ElementTarget 或 ElementTarget 类型。
选项 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
}
返回值
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
}
