【数字】-滚加加载数据慎防小数影响计算

在移动端,经常会使用滚动翻页加载列表数据。

我们可以使用scroll事件封装一个方法,判断滚动到底部或者是设定的某个值,然后加载数据。如下

/**
      * 滑动到底加载更多(需要注意的是,有滚动条才能滚动,如果页面禁止了默认滑动,也无法使用该方法)
      * @param wrap 要滚动的元素
      * @param callback 滚动回调函数,返回参数如果为true,则已滚动到底
    */
    var scrollToBottom = function(wrap,callback){
      var wrap = document.querySelector(wrap),
         divHeight = wrap.clientHeight,
         scrollTop, 
         scrollHeight,
         t = null,
         res;
      wrap.onscroll = function(){
        console.log('scroll', divHeight + '+' + scrollTop + '>' + scrollHeight + '?')
        scrollHeight = this.scrollHeight;
        scrollTop = this.scrollTop;
        if(Math.ceil(scrollTop + divHeight) >= scrollHeight){
          if(callback && typeof callback === "function"){
              clearTimeout(t);
              t = setTimeout(function(){
                  callback(true);
              },100)
          }
        }else{
            res = divHeight+'+'+scrollTop +'>'+ scrollHeight+'?';
            callback(res);          
        }
      };
    }

注意代码中这一行

Math.ceil(scrollTop + divHeight) >= scrollHeight

使用了向上取整,这是因为计算滚动高度或者高度会出现小数点的情况,可能会导致条件不执行,从而出现滚动到底,但实际上并未真正触发。

产生这一现象的原因可详细阅读:css设置元素的宽高为整数,为什么有的浏览器解析出来的宽高是小数?

发表回复

您的电子邮箱地址不会被公开。