BackTop组件在滚动时没反应是怎么回事？

a'ゞ海利提问于 2026-02-27 18:28:19 阅读 16

组件

我用React写了个BackTop回到顶部的按钮，监听了window的scroll事件，但页面滚动时完全没触发。控制台也没报错，就是死活不显示。我试过把阈值设成0，还是不行。

这是我的关键代码：

useEffect(() => {
  const handleScroll = () => {
    if (window.scrollY > 100) setShow(true);
    else setShow(false);
  };
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

难道是监听对象错了？还是需要加什么CSS属性？

我来解答赞 2 收藏

反馈

1 条解答

Code°富水 Lv1

我猜你页面里可能用了 overflow-y: auto 的容器包裹内容，而不是让整个 window 滚动。这种情况 window.scrollY 根本不会变，所以监听 window 的 scroll 当然没反应。

官方文档里说 scroll 事件是绑定在滚动容器上的，不一定是 window。你先在控制台里手动执行 document.scrollingElement 看看返回的是 html 还是某个具体 div。如果是某个 div，那你就得监听这个元素的 scroll 事件，比如：

useEffect(() => {

  const scrollContainer = document.scrollingElement || document.documentElement;

  const handleScroll = () => {

    if (scrollContainer.scrollTop > 100) setShow(true);

    else setShow(false);

  };

  scrollContainer.addEventListener('scroll', handleScroll);

  return () => scrollContainer.removeEventListener('scroll', handleScroll);

}, []);

或者更稳妥点直接监听 document.documentElement 和 document.body 两个都加事件（有些浏览器兼容性问题）：

useEffect(() => {

  const handleScroll = () => {

    const top = window.pageYOffset || document.documentElement.scrollTop;

    if (top > 100) setShow(true);

    else setShow(false);

  };

  window.addEventListener('scroll', handleScroll);

  window.addEventListener('scroll', handleScroll, { passive: true }); // 部分浏览器需要 passive

  return () => window.removeEventListener('scroll', handleScroll);

}, []);

另外确认下你的页面是不是用了 fixed 布局导致没触发滚动？比如整个页面高度没超过视口，或者 overflow: hidden。这些都会让 scroll 事件不触发，但控制台又不会报错，挺坑的。

2026-02-27 19:04