用jquery编写的判断div滚动条底部的方法[推荐]

jQuery中有很多与滚动条相关的概念，但是与滚动条拖动相关的属性有三个，分别是：scrollTop、scrollLeft和scrollHeight。其中scrollHeight属性，在网上几乎找不到应用技巧，我正好需要。

现在我们只讨论与垂直滚动相关的scrollTop和scrollHeight属性。

一、正确理解滚动条相关属性：

想象一下下面的Html代码：

div id=' div 1 ' style=' overflow-y : auto；overflow-x : hidden；' height:500px'div style=' height:750px'/div/div由于内部div标签的高度比外部div长，并且外部div允许垂直滚动条自动出现，所以用浏览器打开后可以看到垂直滚动条。向下拖动滚动条一定距离，页面效果如下(右边的A和B是我拍照后用PS标记的):

那么，外部div的scrollTop和scrollHeight属性是什么？

有人说scrollTop等于图片中的一个标记。ScrollHeight等于外部div 500px的高度。其实都是错的。

其实图中标注的A和B对于我们编程写js代码并没有具体的意义，只有象征意义。

事实上，在js代码中，滚动条被视为一个“点”。ScrollHeight不是“滚动条的高度”(b)，而是滚动条需要滚动的高度，也就是内部div的高度是750px。ScrollTop指示滚动条(一个点)的当前位置在750px中占据多少，这在图中没有标记。

这时，我们对Windows的设计者印象非常深刻，因为滚动条设计得如此精美，欺骗了很多头脑简单的鼠标操作者。A和B之间的距离分别表示滚动条已经滚动和需要滚动的距离，两者之间存在对应关系，但这些不是开发应用程序的程序员考虑的，而是设计操作系统GUI图形界面的程序员考虑的。

2确定垂直滚动条是否到达底部。

明确了以上概念之后，编码其实就比较简单了。以下是示例代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head meta http-equiv=' content-type ' content=' text/html；Charset=utf-8 '标题是否将下拉滚动条滚动到底部？/title脚本语言=' JavaScript ' src=' Http : jquery-1 . 4 . 2 . min . js ' MCE _ src=' Http : jquery-1 . 4 . 2 . min . js '/脚本脚本语言='javascript' $(文档)。ready(function(){ var nscrollhigh=0；//滚动距离的总长度(注意不是滚动条的长度)；var nScrollTop=0；//滚动到当前位置var nDivHight=$('#div1 ')。高度()；$('#div1 ')。scroll(function(){ nscrollhigh=$(this)[0]。scrollHeightnScrollTop=$(this)[0]。scrollTopif(nsroll top ndivhight=nsroll high)alert('滚动条已到达底部')；});});/script body div id=' div 1 ' style=' overflow-y : auto；overflow-x : hidden；' height:500px'div style=' background-color : # CCC；' height:750px'在IE FF下，测试通过/div /div /body /html代码解释：

内部div高度为750，外部div高度为500，所以垂直滚动条需要滚动750-500=250的距离，然后才会到达底部。请参见语句nsrolltop ndivhight=nsrollhight。

在程序中，在外部div的滚动事件中检测并执行if判断语句会消耗非常多的CPU资源。用鼠标拖动滚动条，一个像素的任何变化都会触发事件。但是如果你点击滚动条两端的箭头，事件触发的频率会低很多。因此，应该谨慎使用滚动条的滚动事件。

这个例子判断没有水平滚动条。当有水平滚动条时，情况会略有变化。因此，在NSCRolltop ndivhight=nscrollhigh的语句中，需要使用比较运算符“=”。当没有水平滚动条时，等号“=”就足够了。你可以实际测试它。还可以判断水平滚动条是否已经滚动到最后。

上面jquery中写的判断div滚动条底部的方法[推荐]就是边肖分享的全部内容。希望能给大家一个参考，支持我们。