【vueuse】useScroll使用的注意事项

<script setup lang="ts">
  import { useScroll } from '@vueuse/core'

  const el = ref<HTMLElement | null>(null)
  const { x, y, isScrolling, arrivedState, directions } = useScroll(el)
</script>
 
<template>
  <div ref="el"></div>
</template>

• 第四行，会自动获取 ref=el 的元素，作用域必须在全局 ，否则不会自动导出该属性
• 第五行，如果要响应式修改 scroll 中的这些属性，如：x , y ,必须是在网页渲染之后，可在 onMounted 里或之后修改，如：x.value = 50。

<script>
 import { ref, reactive, toRefs, onMounted, getCurrentInstance, toRef } from 'vue';
 import { useScroll } from '@vueuse/core';
 export default {
 setup(props, { emit }) {
   function initState() {
     return {
       currY: 0,
     };
   }
   const { proxy } = getCurrentInstance();
   const state = reactive(initState());
   onMounted(() => {
    setScroll();
   });
   function setScroll() {
    const { x, y, arrivedState } = useScroll(proxy.$refs.refScroll);
    state.currY = y;
   }
   function add() {
    console.log(state.currY);
    state.currY += 100;
   }
   return {
    ...toRefs(state),
    add,
   };
  }
};
</script>

• 第17行，使用 proxy.$refs.xxx 也必须在元素渲染之后，onMounted 里拿属性值，修改等，不然拿不到元素