美文网首页
js实现上拉加载得操作

js实现上拉加载得操作

作者: 拾钱运 | 来源:发表于2020-09-27 15:15 被阅读0次
//局部上拉加载更多
$(".select_option_con").bind('scroll', throttle(function (e) {
    var scrollHeight = $(this).scrollTop()
    var sum = $(this).height()
    if (scrollHeight >= sum - 100) {
        owerPage++
        getOwer("1")//请求
    }
}, 400));
//window 上拉加载更多
$(window).scroll(throttle(function () {
    var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度
    var scrollHeight = $(document).height(); //当前页面的总高度
    var clientHeight = $(this).height(); //当前可视的页面高度
    if (scrollTop + clientHeight >= scrollHeight - 100) { //距离顶部+当前高度 >=文档总高度 即代表滑动到底部  
     //请求
    }
}, 400));
function throttle(func,delay){     //延缓滚动加载次数  防止抖动
  var timer = null;
  var startTime = Date.now();
  return function(){
      var curTime = Date.now();
      var remaining = delay - (curTime - startTime);
      var context = this;
      var args = arguments;
      clearTimeout(timer);
      if(remaining <= 0){
          func.apply(context,args);
          startTime = Date.now();
      }else{
          timer = setTimeout(func,remaining);
      }
  }
}

有的时候会出现还没有加载第一次他就加载了scroll事件,这个时候可以用一个状态去控制,执行第一次之后返回true,scroll才可以被执行。

相关文章

网友评论

      本文标题:js实现上拉加载得操作

      本文链接:https://www.haomeiwen.com/subject/bmcluktx.html