通过js监听滚动条，滚动到底部加载更多

vue 项目：

在mounted中监听滚动事件：在离开页面的时候取消监听

  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
 
  destroyed() {
    // 离开该页面需要移除这个监听的事件，不然会报错
    window.removeEventListener("scroll", this.handleScroll);
  },

　　

 

在method中：

 

 // 保存滚动值，这是兼容的写法
    handleScroll() {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      let that = this;
      $(".contentSecFind").scroll(function () {
        console.log("进来");
 
        let $this = $(this),
          viewH = $(this).height(), //可见高度
          contentH = $(this).get(0).scrollHeight, //内容高度
          scrollTop = $(this).scrollTop(); //滚动高度
        console.log("scrollTop:" + scrollTop);
        console.log("contentH:" + contentH);
        console.log("viewH:" + viewH);
 
        //if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容
        let diffnum = scrollTop / (contentH - viewH);
        if (diffnum >= 0.95) {
          //到达底部100px时,加载新内容
          // 这里加载数据..
 
          let itemData = that.lobbyList[that.lobbyList.length - 1];
          that.findCaseList(itemData.first_public_time);
        }
      });
    },