如何自动计算屏幕滚动时加载事件？

经常我们在开发工作中面临这种问题，特别是拖动滚动条到一定距离时需要加载事件，一般用于分页加载数据。

因此今天总结了一种方法：

首先必须明白几个元素属性的意思：

（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();

}

})

}