如何用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.internetke.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.internetke.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抽出哪儿去了？如何找出使用该功能抠图？

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

最新更新

HTML5 终于定稿，八年后我们再一次谈谈怎么改变世界

HTML5 respond.js 解决IE6~8的响应式布局问题

HTML5之Canvas基础绘图教程

CSS3滤镜-Filters

Easeljs 中文API