vue-compositions

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

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