上手指南
Hooks 列表
后期规划
上手指南
Hooks 列表
后期规划
简体中文

useScroll

Tags:
Element
Pausable

用于追踪目标元素滚动状态的 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
  }
}
GitHub

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook🎨 Demo📄 Document

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
}

返回值

Returns 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
}