H5滑动到底部自动加载数据

摘要

滑动页面到底，自动加载数据算是一个很常用的功能，减少用户操作，增加用户体验，让用户很顺畅的查看数据，但是浏览器厂商太多，有些方法和属性不兼容，得到的值也是大不相同。

问题描述

手机型号红米note7自带浏览器中，document.documentElement.scrollTop的值是小数，document.body.scrollTop值为0，而在微信浏览器中document.body.scrollTop有值并且为整数，document.documentElement.scrollTop值为0，各大浏览器对于数据的处理不一样，导致最后判断触底这个等式不成立，不触发加载数据的条件，其次应该要做小范围的容错处理，在某个范围内成立就行

解决方案

按照这个公式计算各部分的值

// 节流函数
function throttle(func, wait, mustRun) {
  let timeout,
    startTime = new Date();

  return function() {
    let context = this,
      args = arguments,
      curTime = new Date();
    clearTimeout(timeout);
    // 如果达到了规定的触发时间间隔，触发 handler
    if (curTime - startTime >= mustRun) {
      func.apply(context, args);
      startTime = curTime;
      // 没达到触发间隔，重新设定定时器
    } else {
      timeout = setTimeout(func, wait);
    }
  };
}

// 可滚动高度
let scrollHeight = () =>
  document.body.scrollHeight || document.documentElement.scrollHeight;
// 可视窗口高度
let keshiHeight = () =>
  window.innerHeight ||
  document.documentElement.clientHeight ||
  document.body.clientHeight;

// 注：小米浏览器对于scrollTop的值会有小数，需要做取整操作
// 向上滚动的高度，各大浏览器的计算法则不一样，得到的值可能有小数
let scrollTopHeight = () =>
  Math.ceil(document.body.scrollTop || document.documentElement.scrollTop);

window.onscroll = throttle(
  () => {
    // 增加容错范围, 提前触发加载
    if (scrollHeight() - 50 <= keshiHeight() + scrollTopHeight()) {
      // 业务逻辑操作，对号入座
      if (!this.noMore) {
        console.log("bottom");
        this.pageNo++;
        this.getDataFn();
      }
    }
  },
  300,
  300
);