摘要

滑動頁面到底，自動加載數(shù)據(jù)算是一個很常用的功能，減少用戶操作，增加用戶體驗，讓用戶很順暢的查看數(shù)據(jù)，但是瀏覽器廠商太多，有些方法和屬性不兼容，得到的值也是大不相同。

問題描述

手機型號紅米note7自帶瀏覽器中，document.documentElement.scrollTop的值是小數(shù)，document.body.scrollTop值為0，而在微信瀏覽器中document.body.scrollTop有值并且為整數(shù)，document.documentElement.scrollTop值為0，各大瀏覽器對于數(shù)據(jù)的處理不一樣，導(dǎo)致最后判斷觸底這個等式不成立，不觸發(fā)加載數(shù)據(jù)的條件，其次應(yīng)該要做小范圍的容錯處理，在某個范圍內(nèi)成立就行

解決方案

按照這個公式計算各部分的值

// 節(jié)流函數(shù)
function throttle(func, wait, mustRun) {
  let timeout,
    startTime = new Date();

  return function() {
    let context = this,
      args = arguments,
      curTime = new Date();
    clearTimeout(timeout);
    // 如果達到了規(guī)定的觸發(fā)時間間隔，觸發(fā) handler
    if (curTime - startTime >= mustRun) {
      func.apply(context, args);
      startTime = curTime;
      // 沒達到觸發(fā)間隔，重新設(shè)定定時器
    } else {
      timeout = setTimeout(func, wait);
    }
  };
}

// 可滾動高度
let scrollHeight = () =>
  document.body.scrollHeight || document.documentElement.scrollHeight;
// 可視窗口高度
let keshiHeight = () =>
  window.innerHeight ||
  document.documentElement.clientHeight ||
  document.body.clientHeight;

// 注：小米瀏覽器對于scrollTop的值會有小數(shù)，需要做取整操作
// 向上滾動的高度，各大瀏覽器的計算法則不一樣，得到的值可能有小數(shù)
let scrollTopHeight = () =>
  Math.ceil(document.body.scrollTop || document.documentElement.scrollTop);

window.onscroll = throttle(
  () => {
    // 增加容錯范圍, 提前觸發(fā)加載
    if (scrollHeight() - 50 <= keshiHeight() + scrollTopHeight()) {
      // 業(yè)務(wù)邏輯操作，對號入座
      if (!this.noMore) {
        console.log("bottom");
        this.pageNo++;
        this.getDataFn();
      }
    }
  },
  300,
  300
);