Skip to content

useScrollTo

useScrollTo(options): UseScrollToResult

当滚动页面到达指定阈值时,该 Hook 将控制一个元素的显示与隐藏,并提供页面滚动控制方法

参数

NameType
optionsUseScrollToOptions

返回值

UseScrollToResult

  • 包含一个表示元素是否可见的响应式引用和用于控制页面滚动的方法的对象。

示例

ts
const {visible, pageScrollTo} = useScrollTo({
  visibleThreshold: 200, // 当页面滚动超过 200 时 visible 为 true
})

pageScrollTo({
  scrollTop: 0, // 滚动到顶部
})

示例

ts
const {visible, pageScrollTo} = useScrollTo({
 observe: '.card' // 当这个元素滚动到视窗顶部 - 100px 时,visible 为 true
 observeOffset: {top: -100}
})

pageScrollTo({
 selector: '.line', // 滚动到这个元素的上面 150px 的位置
 offsetTop: 150,
})

源码

use-scroll-to.js