We can solve this problem by Adding delay to window scroll event. If user is not scrolling for last one second, then We can confirm that the user stopped scrolling.

Program

Observe below program. Here we are giving 1000 milli seconds delay  
import React from 'react'

class ExampleApplication extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      scrollStatus:''
    };
    this._timeout = null;
    this.handleScroll = this.handleScroll.bind(this);
  }

  handleScroll(event) {
     if(this._timeout){ //if there is already a timeout in process cancel it
      clearTimeout(this._timeout);
     }
     this._timeout = setTimeout(() => {
       this._timeout = null;
       this.setState({
         scrollStatus:'scroll stopped'
       });
     },1000);
     if(this.state.scrollStatus !== 'scrolling') {
       this.setState({
         scrollStatus:'scrolling'
       });
     }

  }

  render() {
    return (
      <div>
        <div id="topDiv">Scroll status:  <strong>{this.state.scrollStatus}</strong> </div>
        <div id="mainDiv" onScroll={this.handleScroll}>
          Scroll down and up, observe the scrollStatus
          <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
          <h3>bottom</h3>
        </div>
      </div>
    );
  }

}

ExampleApplication.propTypes = {
}

ExampleApplication.defaultProps = {
}

export default ExampleApplication;

0 comments:

Blogroll

Follow this blog by Email

Popular Posts