Question

我有一个UI问题要在React中解决。当用户开始滚动时，将在标题中添加一个背景类。滚动到页面顶部时，标题背景消失。

我已经弄清楚了如何在滚动和修改状态时添加背景，但是如何在用户滚动到页面顶部时进行检测？

Answer 1

您可以通过添加侦听器window.onscroll并在此侦听器中监视window.pageYOffset来实现。这是示例https://codepen.io/teimurjan/pen/NzMgKz?#。

Answer 2

const handleScroll = (e: React.UIEvent<HTMLElement>) => {
    if(e.currentType.scrollTop === 0) {
       alert("on top")
    }
}

<div onScroll={handleScroll}>
       
</div>

Answer 3

这是另一个使用 React Hooks 和 Functional Components 的版本：

const App = () => {
  React.useEffect(() => {
    window.onscroll = () =>
      window.pageYOffset === 0 && console.log("back at top");

    return () => (window.onscroll = null);
  });

  return <div className="container">I'm a very large box</div>;
};

ReactDOM.render(<App />, document.getElementById("root"));

.container {
  height: 500px;
  background-color: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如何在React.js中检测页面滚动到顶部？

3 个答案: