经常我们在开发工作中面临这种问题，特别是拖动滚动条到一定距离时需要加载事件，一般用于分页加载数据。
因此今天总结了一种方法：
首先必须明白几个元素属性的意思：
（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();
}
})
}