移动端滚动加载-----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)
相关文章
- jquery 获取和设置 select下拉框的值(转手册)
- js-jquery-将table的td转化成可编辑的文本
- Jquery-获取同级标签prev,prevAll,next,nextAll
- jQuery中的常用到的三十九个技巧
- 学习jQuery的事件dblclick
- BlueDream.js(蓝梦)——jQuery网站使用引导插件
- js或jquery实现页面打印(局部打印)
- JQuery的ready函数与JS的onload的区别详解
- 【js:片断】jQuery 设置 select 下拉框的选中状态
- js+jquery实现歌词滚动播放
- Uncaught TypeError: Cannot read property 'call' of undefined jquery.validate.min.js:28
- js - SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data jquery-1.9.1.min.js:3:4315
- 一款jquery和css3实现的卡通人物动画特效
- 分享JQuery动画插件Velocity.js的六种列表加载特效
- JQuery 关于位置的计算(重要)
- PgwSlideshow-基于Jquery的图片轮播插件