Vue3 判断鼠标上移动还是下移动的 Hook 函数封装

发布时间 2023-06-24 01:51:45作者: Himmelbleu
import { useThrottleFn } from "@vueuse/core";

export function useWheelRollsUpAndDown(
  onDown: Function,
  onUp?: Function,
  options?: {
    throttle?: number;
  }
) {
  const { throttle = 200 } = options || {};
  let lastScrollY = window.scrollY;
  window.addEventListener(
    "scroll",
    useThrottleFn(e => {
      const isMovedDown = lastScrollY < window.scrollY;
      if (isMovedDown) {
        onDown();
      } else {
        onUp && onUp();
      }
      lastScrollY = window.scrollY;
    }, throttle)
  );
}