Stop listening to scroll event until data loads

Question

I am developing a react component which is basically scroll to bottom feed.

I have an issue while loading more data and props are updating, scroll event queues up and executes after the loading is done. I have tried to disable and enable scroll while data is loading as mentioned here

this.keys = {37: 1, 38: 1, 39: 1, 40: 1};
preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
    e.preventDefault();
  e.returnValue = false;  
}

preventDefaultForScrollKeys(e) {
  if (this.keys[e.keyCode]) {
    this.preventDefault(e);
    return false;
  }
}

disableScroll() {
  if (window.addEventListener) // older FF
    window.addEventListener('DOMMouseScroll', this.preventDefault, false);
  window.onwheel = this.preventDefault; // modern standard
  window.onmousewheel = document.onmousewheel = this.preventDefault; // older browsers, IE
  window.ontouchmove = this.preventDefault; // mobile
  document.onkeydown = this.preventDefaultForScrollKeys;
}

enableScroll() {
  if (window.removeEventListener)
    window.removeEventListener('DOMMouseScroll', this.preventDefault, false);
  window.onmousewheel = document.onmousewheel = null; 
  window.onwheel = null; 
  window.ontouchmove = null;  
  document.onkeydown = null;  
}

ComponentDidRecieveProps(){
  this.enableScroll();
}

handleScroll(event){
  if((event.target.scrollTop + event.target.clientHeight) >= (event.target.scrollHeight) && event.target.scrollTop > this.lastScrollTop) {
     //when hits bottom
     this.disableScroll();
     this.getMoreData();
   }
   this.lastScrollTop = event.target.scrollTop
}

render(){
  return <div onScroll = {(e) => this.handleScroll(e)}> DATA </div>
}

How to disable scrolling temporarily?

Event though scroll disables but once I enable the scroll back it executes the events queued up, hence scroll even with out user scrolling.

I am using onScroll event of a div, to load more data when it hits bottom.

You should show your code that you're using to disable and re-enable; it'll be much easier for us to help if we can see where you're starting from. — Jacob, Mar 27 '17 at 19:27
I don't see anything here that would cause events to queue up. I think the real problem is you're handling every scroll event instead of checking the scroll position. The scroll event is very "chatty" and doesn't just fire when you get to the bottom of the page, but rather whenever the scroll position changes. — Jacob, Mar 27 '17 at 20:02

score 1 · Answer 1 · answered Mar 30 '17 at 11:32

How about this. dataLoaded = true when fetch is done and set it to false before fetching a new set. I haven't tested it.

import React, { PropTypes } from 'react';

class ScrollingComponent extends React.Component {

  constructor(props) {
    super(props);
  }

  removeScrollListener() {
    // if running on client side
    document.removeEventListener('scroll', this.handleScroll, false);
  }

  addScrollListener() {
    // if running on client side
    document.addEventListener('scroll', this.handleScroll, false);
  }

  ComponentDidRecieveProps({ dataLoaded }){
    if(dataLoaded){
        this.addScrollListener();
    } else{
        this.removeScrollListener()
    }
  }

  handleScroll() {
    // your logic
  }

  render() {
    const { data, dataLoaded } = this.props;
    const loading = dataLoaded ? null : <p>Loading ...</p>;
    return (
        <div>
          <loading />
          <Table>
            <tbody >
             // loop through your data
            </tbody>
          </Table>
        </div>
    );
  }
};

const { arrayOf, bool, object } = PropTypes;

ScrollingComponent.propTypes = {
  data: arrayOf(object),
  dataLoaded: bool
};

This is the direction I was looking at, but I have situation where I want the user to be scroll up while the loading is happening, so I do not want to completely remove the scroll. — user2934433, Mar 30 '17 at 22:42
@user2934433 Keep the same logic but in your `handleScroll()` detect the direction like this: http://stackoverflow.com/a/31223774/2679606 — Vahid PG, Mar 31 '17 at 09:23

Stop listening to scroll event until data loads

1 Answers1