javascript - 停止监听滚动事件直到数据加载

Question

我正在开发一个 react 组件，它基本上滚动到底部提要。

我在加载更多数据时遇到问题，并且 Prop 正在更新，滚动事件队列并在加载完成后执行。我尝试在加载数据时禁用和启用滚动，如此处所述

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?

虽然滚动禁用了事件，但是一旦我启用向后滚动，它就会执行排队的事件，因此即使没有用户滚动也可以滚动。

我正在使用 div 的 onScroll 事件，以便在它到达底部时加载更多数据。

Answer 1

这个怎么样。 dataLoaded = true 当获取完成时，并在获取新集合之前将其设置为 false。我没有测试过。

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
};