js实现上拉加载得操作

2020-09-27  本文已影响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才可以被执行。

上一篇 下一篇

猜你喜欢

热点阅读