loading

Vue - 判断鼠标滚轮的上下方向

file:[src/hooks/use-mouse.js]
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)
  );
}
posted @ 2023-06-24 01:44  Himmelbleu  阅读(6)  评论(0编辑  收藏  举报