IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部

作者：编程知识库发布：2013-03-13 分类：javascript 阅读：6,783次

IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部

DTD已声明
IE
document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 浏览器滚动部分高度，document.body.scrollTop 始终为0
document.documentElement.clientHeight 浏览器可视部分高度，document.body.clientHeight 浏览器所有内容高度
FF
document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 浏览器滚动部分高度，document.body.scrollTop 始终为0
document.documentElement.clientHeight 浏览器可视部分高度，document.body.clientHeight 浏览器所有内容高度
Chrome
document.documentElement.scrollHeight 浏览器所有内容高度， document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度
document.documentElement.clientHeight 浏览器可视部分高度，document.body.clientHeight 浏览器所有内容高度
DTD未声明
IE
document.documentElement.scrollHeight 浏览器可视部分高度，document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度
document.documentElement.clientHeight 始终为0，document.body.clientHeight 浏览器可视部分高度
FF
document.documentElement.scrollHeight 浏览器可视部分高度, document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度
document.documentElement.clientHeight 浏览器所有内容高度，document.body.clientHeight 浏览器可视部分高度
Chrome
document.documentElement.scrollHeight 浏览器可视部分高度,document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度
document.documentElement.clientHeight 浏览器所有内容高度，document.body.clientHeight 浏览器可视部分高度

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

浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。
综上

1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0，所以可以用这两个的和来求scrollTop

2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement，未声明的情况下用body

3、document.documentElement.scrollTop在未声明的情况下始终为0，所以可以用来判断是否声明了DTD;

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

转载请注明：IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部 - 编程知识库

该文章由编程知识库发于2013年03月13日发表在javascript分类下，你可以至底部留下评论。

原创文章转载请注明: IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部 | 编程知识库

关键字: js判断滚动条, 判断滚动条

上一篇：对html进行SEO的一点点总结

下一篇：jquery和xml实现省市级联动

您可能还会对这些文章感兴趣

2018-01-05 314次密码保护：支付宝突破微信封锁唤起支付宝代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <script type="text/javascript"> var _0 = "https://qr.alipay.com/c1x013...
2016-12-21 1,032次五个典型的 JavaScript 面试题
在IT界，需要大量的 JavaScript 开发者。如果你的能力能够胜任这一角色，那么你将获得许多更换工作和提高薪水的机会。但是在你被公司录取之前，你需要展现你的技术实力，以便通过面试环节。在这篇文章中，我会为你展示前端面试会被问到的 5 个典型问题及相关解决方法...
2016-12-20 350次JavaScript 字符串常用操作
JavaScript 字符串用于存储和处理文本。因此在编写 JS 代码之时她总如影随形，在你处理用户的输入数据的时候，在读取或设置 DOM 对象的属性时，在操作 Cookie 时，在转换各种不同 Date 时，诸此等等，繁不能数；而她那满多的 API 呵，总有些让人不愿去记忆的冲动，既...
2016-12-15 1,014次js验证固定电话手机号码
规则的国内固定电话和传真的格式基本都是带有0的区号+连接符“-”＋电话号码，另外还有可能有分机号，区号有3位、4位，电话号码有7位和8位的；其它格式的有前面不带0的，或者不带连接符的，或者分机号前面使用#号的，或者前面加“+86”的等等；区号：前面一个0，后面跟2...

IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部

您可能还会对这些文章感兴趣

2018-01-05 314次密码保护：支付宝突破微信封锁唤起支付宝代码

2016-12-21 1,032次五个典型的 JavaScript 面试题

2016-12-20 350次JavaScript 字符串常用操作

2016-12-15 1,014次js验证固定电话手机号码

大家正在看

推荐阅读

全部分类

本月热门