js 实现滚动加载数据

滚动加载数据就是说在达到某个条件的时候自动触发加载数据的动作，通常是滚动到页面底部的时候加载数据；

代码如下：

  handleScroll = (e) => {
    let layout = document.getElementById("layout");

    if (layout.clientHeight + layout.scrollTop >= layout.scrollHeight) {
      // 记载数据的逻辑
    }
  }
  
  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll, true);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll, true);
  }

其中layout是设置滚动的元素，clientHeight 元素可是区域的高度，scrollTop 向上滚动过的高度，scrollHeight 元素内容的高度。

当 可视区域高度 + 向上滚动过的高度 >= 元素内容的高度 时表示滚动到底部了，这时可以调用加载数据的逻辑。

可以使用防抖来防止多次无效的调用，同时如果正在加载中、所有数据都已加载均不需再次加载，代码改为如下：

  handleScroll = _debouce((e) => {
    const { loading, count, blogs = [] } = this.state;
    let layout = document.getElementById("layout");
    if (loading || blogs.length === count) {
      return;
    }

    if (layout.clientHeight + layout.scrollTop >= layout.scrollHeight) {
      // xxxxx
    }
  }, 100);

  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll, true);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll, true);
  }