移动端滚动加载-----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 阅读( ...) 评论( ...) 编辑 收藏