vhook

useScroll

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

API

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

Params

参数名描述类型默认值
target监听滚动的 DOM,可使用css选择器String | Element | Ref<Element | null>
delay节流延时时间（为0则不使用节流)number200

Result

参数名描述类型
xelement.scrollLeftDeepReadonly<Ref<number>>
yelement.scrollTopDeepReadonly<Ref<number>>
clear解绑监听事件() => void

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 { useScroll } from 'vhook'
  import { ref } from 'vue'
  export default {
    setup () {
      const target = ref(null)
      const [x, y ] = useScroll(target)
      return {
        x,
        y,
        target
      }
    }
  }
</script>