useFrameWheel.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. import raf from '../../_util/raf';
  2. import isFF from '../utils/isFirefox';
  3. import useOriginScroll from './useOriginScroll';
  4. export default function useFrameWheel(inVirtual, isScrollAtTop, isScrollAtBottom, onWheelDelta) {
  5. let offsetRef = 0;
  6. let nextFrame = null;
  7. // Firefox patch
  8. let wheelValue = null;
  9. let isMouseScroll = false;
  10. // Scroll status sync
  11. const originScroll = useOriginScroll(isScrollAtTop, isScrollAtBottom);
  12. function onWheel(event) {
  13. if (!inVirtual.value) return;
  14. raf.cancel(nextFrame);
  15. const {
  16. deltaY
  17. } = event;
  18. offsetRef += deltaY;
  19. wheelValue = deltaY;
  20. // Do nothing when scroll at the edge, Skip check when is in scroll
  21. if (originScroll(deltaY)) return;
  22. // Proxy of scroll events
  23. if (!isFF) {
  24. event.preventDefault();
  25. }
  26. nextFrame = raf(() => {
  27. // Patch a multiple for Firefox to fix wheel number too small
  28. // ref: https://github.com/ant-design/ant-design/issues/26372#issuecomment-679460266
  29. const patchMultiple = isMouseScroll ? 10 : 1;
  30. onWheelDelta(offsetRef * patchMultiple);
  31. offsetRef = 0;
  32. });
  33. }
  34. // A patch for firefox
  35. function onFireFoxScroll(event) {
  36. if (!inVirtual.value) return;
  37. isMouseScroll = event.detail === wheelValue;
  38. }
  39. return [onWheel, onFireFoxScroll];
  40. }