如何知道我们是否正在滚动页面？

Question

如何检测鼠标滚动事件，如何获得我们当前没有进行滚动的状态。如何在这种情况下创建反应自定义挂钩。如果没有滚动事件发生，钩子将产生假状态，而相反的情况则产生真状态。

我以前用过setTimeout来解决这个问题，但结果并不是我想要的。 使用 setTimeout 时代码如下所示

  const [isWheeling, setIsWheeling] = useState(false);

  useEffect(() => {
    let scrollEndTimer;
    const wheelTimer = () => {
      setIsWheeling(true)

      clearTimeout(scrollEndTimer)
      scrollEndTimer = setTimeout(() => {
      // setTimeout(() => {
        setIsWheeling(false)
      }, 300)
    }

    window.addEventListener('wheel', wheelTimer)
    return () => window.removeEventListener('wheel', wheelTimer)
  }, [])

  useEffect(() => {
    if (isWheeling) {
      gsap.to(svgHeightRef.current, {
        value: 200,
        duration: 0.5 
      })
    } else {
      gsap.to(svgHeightRef.current, {
        value: 500,
        duration: 1
      })
    }

  }, [isWheeling])

它的行为不符合我想要的方式，我实现 setTimeout 的方式可能有问题。

问题只是如何检测我是否移动了鼠标滚轮。如果我对鼠标滚轮什么都不做，就会给我错误的状态，而每当我触摸鼠标滚轮时，它就会立即给我真实的状态。

任何人都可以帮我解决这个问题吗？谢谢你

Answer 1

要创建一个 React 自定义钩子来检测是否发生滚动事件，可以使用以下方法。

import { useState, useEffect } from 'react';

const useScrollDetection = () => {
const [isScrolling, setIsScrolling] = useState(false);

useEffect(() => {
   let scrollEndTimer;

   const handleScroll = () => {
     setIsScrolling(true);

     clearTimeout(scrollEndTimer);
     scrollEndTimer = setTimeout(() => {
        setIsScrolling(false);
     }, 300);
  };

   window.addEventListener('wheel', handleScroll);

   return () => {
    window.removeEventListener('wheel', handleScroll);
   };
 }, []);

  return isScrolling;
};

// Usage in your component
const YourComponent = () => {
const isScrolling = useScrollDetection();

useEffect(() => {
  if (isScrolling) {
    // Your logic when scrolling is happening
    gsap.to(svgHeightRef.current, {
      value: 200,
      duration: 0.5,
    });
  } else {
    // Your logic when scrolling is not happening
    gsap.to(svgHeightRef.current, {
      value: 500,
      duration: 1,
    });
  }
}, [isScrolling]);

// Rest of your component logic
};

这个自定义钩子 useScrollDetection 为 Wheel 事件设置一个事件监听器，并相应地切换 isScrolling 状态。该钩子返回滚动事件的当前状态。在您的组件中，您可以使用此钩子在滚动发生或不发生时触发必要的逻辑。