移动端滚动加载-----jQuery 和 原生JS

移动端滚动加载-----jQuery 和 原生JS

判断滚动条到底部,需要用到DOM的三个属性值,使用jQuery分别是:

$('body').scrollTop()为滚动条在Y轴上的滚动距离。

$(window).height()为内容可视区域的高度。

$('body').height()为内容可视区域的高度加上溢出(滚动)的距离。

从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为$('body').scrollTop() +$(window).height() ==$('body').height()。

1.绑定滚动监听事件

 

$(window).bind('scroll',isScrollBottom);


2.判断滚动条已滚动到底部

 

 

$('body').height() - $('body').scrollTop() - $(window).height() < 10


3.进入判断首先解除(防止进行多次ajax请求)

 

 

 $(window).unbind('scroll',isScrollBottom);


4.返回数据,渲染到页面并再次绑定监听事件

 

 

$(window).bind('scroll',isScrollBottom);

如果没有返回数据,提示‘没有更多商品’。
 

 

var isScrollBottom = function(){
        if($('body').height() - $('body').scrollTop() - $(window).height() < 10){
            //解除滚动监听绑定事件
            $(window).unbind('scroll',isScrollBottom);
            //ajax请求代码
	    //ajax的成功函数
	    success:function(data){
		if(data.length > 0){
			//将数据渲染到页面
			
			
			$(window).bind('scroll',isScrollBottom);
		}else{
			alert('没有更多产品啦!');
		}
	    }


            //重新启动滚动监听事件,放入ajax成功函数的最后执行
	    //如果再次绑定未在ajax中执行,则可以在ajax过后进行延迟绑定
            //setTimeout(function(){$(window).bind('scroll',isScrollBottom);},2000);
        }
    }
    $(window).bind('scroll',isScrollBottom);

 

原生JS:scrollTop、clientHeight、scrollHeight

 

 

scrollTop为滚动条在Y轴上的滚动距离。

clientHeight为内容可视区域的高度。

scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。

从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

 

1.滚动条在Y轴上的滚动距离

 

 

function getScrollTop(){
  var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
  if(document.body){
    bodyScrollTop = document.body.scrollTop;
  }
  if(document.documentElement){
    documentScrollTop = document.documentElement.scrollTop;
  }
  scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
  return scrollTop;
}

2.文档的总高度

 

 

function getScrollHeight(){
  var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
  if(document.body){
    bodyScrollHeight = document.body.scrollHeight;
  }
  if(document.documentElement){
    documentScrollHeight = document.documentElement.scrollHeight;
  }
  scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
  return scrollHeight;
}

3.浏览器视口的高度

 

function getWindowHeight(){
  var windowHeight = 0;
  if(document.compatMode == "CSS1Compat"){
    windowHeight = document.documentElement.clientHeight;
  }else{
    windowHeight = document.body.clientHeight;
  }
  return windowHeight;
}

4.对window绑定监听事件

 

window.addEventListener('scroll',isScrollB0ttom ,false);
var isScrollB0ttom = function(){
  if(getScrollHeight() - getScrollTop() - getWindowHeight() < 10){
		//解除绑定
		window.removeEventListener('scroll',isScrollB0ttom ,false);
//ajax数据请求
		//数据渲染后再次绑定监听事件window.addEventListener('scroll',isScrollB0ttom ,false);
  }
};

注意:
1.每次满足滑动到底部进入判断先解除监听事件;
2.每次加载数据渲染完后,必须再次绑定监听事件;
3.判断触发条件使用一个小的范围。

其他

[我的博客,欢迎交流!](http://rattenking.gitee.io/stone/index.html)

[我的CSDN博客,欢迎交流!](https://blog.csdn.net/m0_38082783)

[微信小程序专栏](https://blog.csdn.net/column/details/18335.html)

[前端笔记专栏](https://blog.csdn.net/column/details/18321.html)

[微信小程序实现部分高德地图功能的DEMO下载](http://download.csdn.net/download/m0_38082783/10244082)

[微信小程序实现MUI的部分效果的DEMO下载](http://download.csdn.net/download/m0_38082783/10196944)

[微信小程序实现MUI的GIT项目地址](https://github.com/Rattenking/WXTUI-DEMO)

[微信小程序实例列表](http://blog.csdn.net/m0_38082783/article/details/78853722)

[前端笔记列表](http://blog.csdn.net/m0_38082783/article/details/79208205)

[游戏列表](http://blog.csdn.net/m0_38082783/article/details/79035621)

posted @ 2017-06-12 11:30 Newman·Li 阅读( ...) 评论( ...) 编辑 收藏
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值