hooks封装页面滚动监听

hooks文件夹内部文件内

import { ref } from "vue";
export default function useScrollPosition() {
  const scrollX = ref(0);
  const scrollY = ref(0);
  document.addEventListener("scroll", () => {
    scrollX.value = window.screenX;
    scrollY.value = window.scrollY;
  });
  return {
    scrollX,
    scrollY,
  };
}

使用

const { scrollX, scrollY } = useScrollPosition();
watch(
  [scrollX, scrollY],
  () => {
    console.log(scrollX.value, scrollY.value);
  },
  { immediate: true }
);