vhook

useScrollRef

追踪特定 DOM 节点的滚动位置

TIP

功能与 useScroll 相同，区别在于不用传入绑定的目标，内部会生成一个 Ref ，用于在模板中绑定 ref

API

const [target, x, y, clear] = useScrollRef(delay)

Params

参数名描述类型默认值
delay节流时间number200

Result

参数名描述类型
xelement.scrollLeftDeepReadonly<Ref<number>>
yelement.scrollTopDeepReadonly<Ref<number>>
clear解绑监听事件() => void
target用于设置 refRef<Element | null>

Example

Code

<template>
  <p>x: {{x}}</p>
  <p>y: {{y}}</p>
  <p>滚动下方粉色块观测x和y变化</p>
  <div 
    ref="target"
    style="border: 1px solid #ccc;width: 200px; height: 200px; overflow: auto;">
    <div 
      style="width: 300px; height: 300px; background: pink;"></div>
  </div>
</template>

<script>
  import { useScrollRef } from 'vhook'
  export default {
    setup () {
      const [target, x, y ] = useScrollRef()
      return {
        x,
        y,
        target
      }
    }
  }
</script>