经常我们在开发工作中面临这种问题,特别是拖动滚动条到一定距离时需要加载事件,一般用于分页加载数据。
因此今天总结了一种方法:
首先必须明白几个元素属性的意思:
(1)获取浏览器显示区域(可视区域)的高度 :$(window).height();
(2)获取浏览器显示区域(可视区域)的宽度 :$(window).width();
(3)获取页面的文档高度:$(document).height();
(4)获取页面的文档宽度 :$(document).width();
(5)浏览器当前窗口文档body的高度:$(document.body).height();
(6)浏览器当前窗口文档body的宽度:$(document.body).width();
(7)获取滚动条到顶部的垂直高度 (即网页被卷上去的高度):$(document).scrollTop();
(8)获取滚动条到左边的垂直宽度 :$(document).scrollLeft();
(9)获取或设置元素的宽度:$(obj).width();
(10)获取或设置元素的高度:$(obj).height();
(11)某个元素的上边界到body最顶部的距离:obj.offset().top;//(在元素的包含元素不含滚动条的情况下)
(12)某个元素的左边界到body最左边的距离:obj.offset().left;//(在元素的包含元素不含滚动条的情况下)
(13)返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offset().top//(在元素的包含元素含滚动条的情况下)
(14)返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offset().left//(在元素的包含元素含滚动条的情况下)
示例:假如有一个div里面有两个小div,一上一下的。
现在情况我需要使div中id=“div2”区域滚动,div中id=“div1”固定不动,然后id="div2"的右边带上滚动条,一旦滚动条拉到底部就自动加载数据。
代码如下:
<div class="container">
<div id="div1">
巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉罢了罢了罢了吧
巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉罢了罢了罢了吧
巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉罢了罢了罢了吧
</div>
<div id="div2" style=" overflow:auto;-webkit-overflow-scrolling:touch">
滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域
滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域
滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域
滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域滚动区域
</div>
</div>
js代码:
self.minotor = function(){
//先自动动态计算div中的id=“div2”的高度(也就是滚动的区域距离)
var scrollheight = parseInt($(document).height())-parseInt($("#div1").css("height"))
console.log("滚动区域高度大小"+scrollheight);
//动态设置成滚动区域的高度大小,这样的话右边的侧边栏就会出现滚动条。
$("#div2").css("height",scrollheight+"px");
//滚动区域滚动加载数据
$("#div2").scroll(function(){
var $this = $(this),
viewH = $(this).height(),//可见高度
contentH = $(this).get(0).scrollHeight,//内容高度
scrollTop = $(this).scrollTop(),//滚动高度
if(contentH-viewH-scrollTop<=10){//内容高度减去可见高度-滚动高度小于等于10的时候加载数据
//加载数据
loadData();
}
})
}