//滚动条滚动悬浮顶部div
function scrollInit(){
var timeFlag = true;
var a = function scroll() {
var body = $("body");
return function () {
if (timeFlag) {
timeFlag = false;
setTimeout(function () {
timeFlag = true;
if (body.scrollTop()>64) {
$('.analysis_name_div').css('display','block');
$('.main_box').css('min-height','calc(100% - 54px - 113px)');
$('.left_box').css('margin-top', '-50px');
}
else {
$('.analysis_name_div').css('display','none');
$('.main_box').css('min-height','calc(100% - 54px - 113px)');
$('.left_box').css('margin-top', '0px');
}
}, 0)
}
}
}();
$(document).scroll(a);
}
在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表。之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能。先看看浏览效果:
当滚动条滚动到页面底部时,提示“正在加载…”。
当页面已经加载了所有数据后,滚动到页面底部会提示“数据已加载到底了”:
实现数据无限加载的过程大致如下:
1.滚动条滚动到页面底部。
2.触发ajax加载,把请求返回的数据加载到列表后面。
如何判断滚动条是否滚动到页面底部?我们可以设置一个规则:当滚动条的滚动高度和整个文档高度相差不到20像素,则认为滚动条滚动到页面底部了:
文档高度 - 视口高度 - 滚动条滚动高度 < 20
要通过代码实现这样的判断,我们必须要了解上面的这些高度通过哪些代码获取?可以参考我之前写的一篇“HTML元素坐标定位,这些知识点得掌握”。
上面的判断,封装了一个方法:
//检测滚动条是否滚动到页面底部 function isScrollToPageBottom(){ //文档高度 var documentHeight = document.documentElement.offsetHeight; var viewPortHeight = getViewportSize().h; var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; return documentHeight - viewPortHeight - scrollHeight < 20; }