滚动内容部分时如何停止页面滚动？

我创建了一个在内容部分上滚动并滚动内容部分时更改类的函数，这意味着如果用户在内容部分上滚动，则页面将停止滚动直到内容部分的末尾滚动，然后继续滚动页面。

但是，如果我在内容部分上滚动，页面将继续滚动，我想在滚动到结尾时在内容部分上停止吗？

How to use event.preventDefault() to do it or any good ideas ?

这是我的代码：

  class App extends React.Component {
  state = { active: 0 };

  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  }

  handleScroll = event => {
    const { pageYOffset } = window;
    const { active } = this.state;

    if (pageYOffset >= 500 && active === 0) {
      this.setState({ active: 1 });
    } else if (pageYOffset < 500 && active === 1) {
      this.setState({ active: 0 });
    }
  };

  render() {
    const { active } = this.state;
    return (
      <div className="home_page">
        <div className="top_header">
         <img src={banner}/>
        </div

        <div className="content">
         <div
          class="section_1"
          style={{
            height: "100%",
            width: "100%",
            backgroundColor: "red",
            display: active === 0 ? "block" : "none"
          }}
         />

          <div
          style={{
            height: "100%",
            width: "100%",
            backgroundColor: "blue",
            display: active === 1 ? "block" : "none"
          }}
         />

      <div
          style={{
            height: "100%",
            width: "100%",
            backgroundColor: "blue",
            display: active === 1 ? "block" : "none"
          }}
        />
      </div>

    <div className="footer">
         <div>footer_info</div>
        </div
    </div>

    </div>
    );
  }
}

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