@orca-fe/hooks/es/useWheel.js

React Hooks Collections

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { useDebounceFn, useEventListener, useSetState } from 'ahooks';
import { add } from 'lodash-es';
export var WHEEL_UP = 'up'; // 向上滚动
export var WHEEL_DOWN = 'down'; // 向下滚动
export var WHEEL_LEFT = 'left'; // 向左滚动
export var WHEEL_RIGHT = 'right'; // 向右滚动

// 鼠标滚轮最小延迟毫秒数
var minWheelStopDelay = 300;
var defaultState = {
  rolling: false,
  direction: null,
  movement: 0,
  distance: 0
};
export default function useWheel(target, options = {}) {
  var _options$delay = options.delay,
    delay = _options$delay === void 0 ? minWheelStopDelay : _options$delay;
  var _useSetState = useSetState(defaultState),
    _useSetState2 = _slicedToArray(_useSetState, 2),
    state = _useSetState2[0],
    setState = _useSetState2[1];
  var _useDebounceFn = useDebounceFn(() => {
      setState(defaultState);
    }, {
      wait: delay > minWheelStopDelay ? delay : minWheelStopDelay
    }),
    debounceStopWheelScroll = _useDebounceFn.run;
  useEventListener('wheel', event => {
    event.preventDefault();
    var deltaX = event.deltaX,
      deltaY = event.deltaY;
    if (Math.abs(deltaX) > Math.abs(deltaY)) {
      setState({
        rolling: true,
        direction: deltaX > 0 ? WHEEL_RIGHT : WHEEL_LEFT,
        movement: deltaX,
        distance: add(state.distance, deltaX)
      });
    } else {
      setState({
        rolling: true,
        direction: deltaY > 0 ? WHEEL_DOWN : WHEEL_UP,
        movement: deltaY,
        distance: add(state.distance, deltaY)
      });
    }
    debounceStopWheelScroll();
  }, {
    target
  });
  return state;
}