移动端滚动加载-----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)