JQuery判断子元素是否滚动到父元素底部？
JQuery判断子元素是否滚动到父元素底部？
判断原理：已经滚动的高度 + 父元素的高度 >= 子元素的整体高度
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>判断子元素是否滚动到父元素底部？</title>
<script src="/Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<body>
<div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
<div id="div2" style="background-color:#ccc; height:750px;">IE 和 FF 下测试通过</div>
</div>
<script language="javascript">
$(function (){
var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)等于子元素的整体高度
var nScrollTop = 0; //滚动到的当前位置(是已经滚动的高度)
var nDivHight = $("#div1").height(); //父元素的高度
$("#div1").scroll(function(){
nScrollHight = $(this)[0].scrollHeight;
nScrollTop = $(this)[0].scrollTop;
console.log("nScrollTop",nScrollTop);
console.log("nScrollHight",nScrollHight);
if(nScrollTop + nDivHight >= nScrollHight)
alert("滚动条到底部了");
});
})
</script>
</body>
</html>
