How to Stop scroll event from affecting other page in React JS

Question

I have a browse feature that uses infinite scroll to load more data on the page. It works fine; however, when I route to a different page, that page also scroll down automatically.

Is there a way to kill the scroll event when changing route or during unmount?

So far I tried these ways:

$(window).unbind('scroll');

$(window).bind('touchmove',function(e){
      e.preventDefault();
});

The only lacking part is to stop the scroll event when changing routes / page. Please advise. Thanks a lot.

Answer 1

使用componentWillUnmount生命周期方法取消绑定所有处理程序

Answer 2

你可以在reactjs中使用这样的听众：

 componentDidMount = ()=> {
        window.addEventListener('resize', this.handleResize);

      };

      componentWillUnmount = () => {
        window.removeEventListener('resize', this.handleResize);

      };
      handleResize = (e) => {
        const W = window.innerWidth;
        this.setState({windowWidth: W});
    }

Answer 3

我想我知道这个问题，当我在上一页仍在加载或订阅数据时进入另一个页面时会出现问题。现在我正试图找到一种方法来减少订阅过程。