如何用JS判斷滾動條拉到了最底部？

時間：2014-05-23 來源：科e互聯

如何用JS判斷滾動條拉到了最底部？其實原理很簡單，用網頁總高度-滾動的位置>瀏覽器可見區域高度，則證明滾動條拉到了最底部。不多說看代碼測試：

一、如何獲得網頁整體高度？

利用jQuery獲取body高度方法：$(documet).height();

二、如何獲得滾動高度？

利用jQuery獲取滾動高度方法：$("html,body").scrollTop();

三、如何獲得瀏覽器可見高度？

利用JS獲取瀏覽器可見高度方法：document.documentElement.clientHeight;

最終代碼：

$(window).scroll(function(){
if(($("body").height()-$("body,html").scrollTop())<=document.documentElement.clientHeight){
alert("到底了");
}
});

運行代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用JS判斷滾動條拉到了最底部方法</title>
<script language="javascript" src="http://www.aulsn.com/public/js/jquery.js"></script>
</head>
<body style="height:3000px;">
鼠標向下滾動看效果
<script language="javascript">
$(window).scroll(function(){ 
if(($("body").height()-$("body,html").scrollTop())<=document.documentElement.clientHeight){
alert("到底了");
}
});
</script>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用JS判斷滾動條拉到了最底部方法</title>
<script language="javascript" src="http://www.aulsn.com/public/js/jquery.js"></script>
</head>
<body style="height:3000px;">
鼠標向下滾動看效果
<script language="javascript">
$(window).scroll(function(){ 
if(($("body").height()-$("body,html").scrollTop())<=document.documentElement.clientHeight){
alert("到底了");
}
});
</script>
</body>
</html>

標簽 js教程滾動條

收藏分享評論

如何用JS判斷滾動條拉到了最底部？

分類導航

大家都在看

Photoshop制作斜紋背景的簡便方法

pageSwitch.js用法

移動端webapp開發必備知識

ps教程：Banner制作中素材的融合技巧

PS抽出哪兒去了？如何找出使用該功能摳圖？

最新更新

HTML5 終于定稿，八年后我們再一次談談怎么改變世界

HTML5 respond.js 解決IE6~8的響應式布局問題

HTML5之Canvas基礎繪圖教程

CSS3濾鏡-Filters

Easeljs 中文API