分类导航

JavaScript 发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了js判断滚动条是否已到页面最底部或顶部实例，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法。分享给大家供大家参考。具体分析如下：

我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了，否则就自动隐藏了，下面就来给大家介绍这种效果实现原理与方法。

当可视区域小于页面的实际高度时，判定为出现滚动条，即：

title"> 代码如下:

.offsetHeight) scroll = true;

要使用 document.documentElement ，必须在页面头部加入声明：

title"> 代码如下:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

其实，这段代码是不起作用的，因为他没考虑到一个问题，就是浏览器的边框，当我们在获取页面的offsetHeight高度时是包括了浏览器的边框的，浏览器的边框是2个像素，所以这时无论在任何情况下clientHeight 始终是小于offsetHeight的，这就使得即使没有滚动条它也为true,因此我们要修正这个错误，代码应该这样改，在offsetHeight上减去4个像素，即：
<div class="codetitle"><a style="cursOR: pointer" data="15" class="copybut" id="copybut15" onclick="doCopy('code15')"> 代码如下:

<div class="codebody" id="code15">if (document.documentElement.clientHeight < document.documentElement.offsetHeight-4){
//执行相关脚本。
}

还有，这里要搞清楚，上面这代码是判断横向滚动条的，我们一般要判断的是纵向滚动，代码如下：
<div class="codetitle"><a style="cursOR: pointer" data="39536" class="copybut" id="copybut39536" onclick="doCopy('code39536')"> 代码如下:

<div class="codebody" id="code39536">if (document.documentElement.clientWidth < document.documentElement.offsetWidth-4){
//执行相关脚本。
}

判断滚动条是否已拉到页面最底部，可以用如下代码

title"> 代码如下:

.onscroll = function (){ var marginBot = 0; if (document.documentElement.scrollTop){ marginBot = document.documentElement.scrollHeight – (document.documentElement.scrollTop+document.body.scrollTop)-document.documentElement.clientHeight; } else { marginBot = document.body.scrollHeight – document.body.scrollTop- document.body.clientHeight; } if(marginBot<=0) { //do something } }

示例2

在网上找的。还挺兼容浏览器的。奇怪的是我在文档里面没找到相关信息。代码贴出来吧。

title">@L_874_3@ 代码如下:

******************** * 取窗口滚动条高度 ******************/ function getScrollTop() { var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop) { scrollTop=document.documentElement.scrollTop; } else if(document.body) { scrollTop=document.body.scrollTop; } return scrollTop; }

/******************** * 取窗口可视范围的高度 *******************/ function getClientHeight() { var clientHeight=0; if(document.body.clientHeight&&document.documentElement.clientHeight) { var clientHeight = (document.body.clientHeightdocument.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; } return clientHeight; } /******************** * 取文档内容实际高度 *******************/ function getScrollHeight() { return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight); } function test(){ if (getScrollTop()+getClientHeight()==getScrollHeight()){ alert("到达底部"); }else{ alert("没有到达底部"); } }

补充：

DTD已声明:

.body.scrollHeight 浏览器所有内容高度 document.documentElement.scrollTop 浏览器滚动部分高度，document.body.scrollTop 始终为0 document.documentElement.clientHeight 浏览器可视部分高度，document.body.clientHeight 浏览器所有内容高度

.body.scrollHeight 浏览器所有内容高度 document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度 document.documentElement.clientHeight 浏览器可视部分高度，document.body.clientHeight 浏览器所有内容高度

DTD未声明:

.body.scrollHeight 浏览器所有内容高度 document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度 document.documentElement.clientHeight 始终为0，document.body.clientHeight 浏览器可视部分高度

.body.scrollHeight 浏览器所有内容高度 document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度 document.documentElement.clientHeight 浏览器所有内容高度，document.body.clientHeight 浏览器可视部分高度

浏览器所有内容高度即浏览器整个框架的高度，包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和

浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。看懂了上面的参数我们就可以做出兼容ie,ff,chrome浏览器的滚动效果了。

希望本文所述对大家的javascript程序设计有所帮助。

大佬总结

以上是大佬教程为你收集整理的js判断滚动条是否已到页面最底部或顶部实例全部内容，希望文章能够帮你解决js判断滚动条是否已到页面最底部或顶部实例所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。