vue3 计算滚动条的滚动距离

p1：在 onMounted 钩子函数中,监听滚动条事件（点语法+toRefs）

<template>
  <div style="width:3000px;height:3000px" >
    <p>onscrollLeft：{{ x }}</p>
    <p>onscrollTop：{{ y }}</p>
  </div>
</template>

<script>
import { onMounted, reactive } from 'vue-demi'
import { toRefs } from '@vueuse/core'

export default {
  setup () {
    // 1.定义初始变量，用 reactive 函数变成响应式数据
    const scrollObj = reactive({
      x: 0,
      y: 0
    })
    // 2.在 onMounted 钩子函数中 触发滚动条事件
    onMounted(() => {
      window.onscroll = () => {
        // 3.获取值，取整
        scrollObj.x = parseInt(document.documentElement.scrollLeft)
        scrollObj.y = parseInt(document.documentElement.scrollTop)
      }
    })
    // 4. 使用 toRefs() return 出去
    return { ...toRefs(scrollObj) }
  }
}
</script>

p2：在 onMounted 钩子函数中,监听滚动条事件（addEventListener+ref）

<template>
  <div style="width:3000px;height:3000px" >
    <p>onscrollLeft：{{ x }}</p>
    <p>onscrollTop：{{ y }}</p>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue'
export default {
  setup () {
    // 1.定义初始变量，用 ref 函数变成响应式数据
    const x = ref(0)
    const y = ref(0)
    // 2.在 onMounted 钩子函数中 触发滚动条事件
    onMounted(() => {
      window.addEventListener('scroll', () => {
        // 3.获取值，取整
        x.value = parseInt(document.documentElement.scrollLeft)
        y.value = parseInt(document.documentElement.scrollTop)
      })
    })
    // 4.return 出去
    return { x, y }
  }
}
</script>

p3：利用第三方： vueuse/core重构

vueuse/core : 组合式API常用复用逻辑的集合

<template>
  <div style="width: 3000px; height: 3000px">
    <p>onscrollLeft：{{ x }}</p>
    <p>onscrollTop：{{ y }}</p>
  </div>
</template>

<script>
// 1.下包 yarn add @vueuse/core@5.3.0(重构)
// 2.导入 useWindowScroll 函数
import { useWindowScroll } from '@vueuse/core'
export default {
  setup () {
    // 3.解构赋值
    // const { x } = useWindowScroll()
    // const { y } = useWindowScroll()
    const { x, y } = useWindowScroll()
    // 4.return 出去，就可以直接使用
    return { x, y }
  }
}
</script>