javascript - 在 Reactjs 中隐藏滚动元素？

Question

我有一个为该 div 启用滚动的 div。我有一些元素，当用户开始滚动时，我希望一个元素消失，当滚动停止时，我希望它再次出现。

我该怎么做

<div className="container"/> 
    <div>Hide me on scrolling</div>
    <div>Always show </div>
</div>

.container{
    flex: 1 1 80%;
    display: flex;
    flex-wrap: wrap;
    width: calc(100vw - 110px);
    height: calc(100vh - 75px);
    overflow-y: auto;
    min-width: 500px;
    display: flex;
    justify-content: center;
    z-index: 1;
}

Answer 1

浏览器中没有真正的滚动状态；滚动事件发生，然后就完成了。

您可以设置一个状态，例如isScrolling 在滚动事件发生时设置为 true，然后设置超时以在上次滚动后将其设置回 false。

示例

class App extends React.Component {
  timeout = null;
  state = {
    isScrolling: false
  };
  
  componentDidMount() {
    window.addEventListener("scroll", this.onScroll);
  }
  
  componentWillUnmount() {
    window.removeEventListener("scroll", this.onScroll);
  }

  onScroll = () => {
    this.setState({ isScrolling: true });

    clearTimeout(this.timeout);

    this.timeout = setTimeout(() => {
      this.setState({ isScrolling: false });
    }, 200);
  };

  render() {
    return (
      <div style={{ height: 5000, overflowY: "scroll" }}>
        <div style={{ paddingTop: 50 }}>
          {this.state.isScrolling ? "Hidden" : "Shown"}
        </div>
      </div>
    );
  }
}

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

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

<div id="root"></div>