CODEWITHSUNDEEP
javascriptreactjsscroll
Website Is Fun
Website Is Fun

Reputation: 300

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

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.

Upvotes: 0

Views: 1063

Answers (3)

Website Is Fun
Website Is Fun

Reputation: 300

I think I know the issue, the issue occurs when I go on to another page while the previous page is still loading or subscribing data. Now I am trying to find a way on how to cut subscription process.

Upvotes: 0

user5738822
user5738822

Reputation:

you can use from listeners in reactjs like this : 

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

      };

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

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

Upvotes: 0

Igorsvee
Igorsvee

Reputation: 4201

Use componentWillUnmount lifecycle method to unbind all handlers

Upvotes: 1

Related Questions