添加带有 useEffect 挂钩的事件侦听器以进行滚动

Question

我正在使用下面的 useEffect 钩子来检测页面滚动，但它没有将“是”记录到控制台。我错过了什么？我的页面滚动超过 50 像素，所以它应该打印出“是”。

useEffect(() => {

        const scrollFun = window.addEventListener("scroll", () => {
            if(window.pageYOffset%50 === 0) {
                console.log("yes");
            }
        });

        return () => {
            window.removeEventListener("scroll", scrollFun);
        };        

    }, []);

Answer 1

如果您只想要一个“页面已滚动 50 像素”，或者您是否正在寻找每 50 像素滚动一次的持续监控，仍然有点不清楚，所以我会尝试回答这两个问题，您可以选择哪个更接近。< /p>

场景 1 - 滚动前 50 像素并记录

这个是微不足道的。我建议使用 React ref 来“捕获”已将页面滚动至少 50 像素，并在向后滚动时重置。

const scrolled50Ref = useRef();

useEffect(() => {
  const scrollFun = () => {
    if (window.pageYOffset > 50) {
      if (!scrolled50Ref.current) {
        scrolled50Ref.current = true;
        console.log('scrolled 50 px');
      }
    } else {
      scrolled50Ref.current = false;
    }
  }
  
  window.addEventListener("scroll", scrollFun);

  return () => {
    window.removeEventListener("scroll", scrollFun);
  };
}, []);

场景 2 - 每滚动 50 像素记录一次

这个并不像您所看到的那样微不足道。这里的问题是许多浏览器使用加速滚动，因此您不会点击every pageYOffset 值。换句话说，在滚动到一定的速度/速度后，您可能不会遇到可以被 50 整除的 pageYOffset。

这里的“修复”是将可整除的“窗口”增加50。

useEffect(() => {
  const scrollFun = () => {
    if (window.pageYOffset % 50 >= 45) {
      console.log("scrolled 50-ish pixels");
    }
  }
  
  window.addEventListener("scroll", scrollFun);

  return () => {
    window.removeEventListener("scroll", scrollFun);
  };
}, []);

演示

Answer 2

用这个改变你的 if 条件：

  if (window.pageYOffset > 0)