vue-compositions

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

x: 0

y: 0

滚动下方粉色块观测x和y变化

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