您的位置：前端开发>javascript>IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部

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

作者：前端开发 发布：2013-03-13 分类：javascript 阅读：6,609次

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;

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

window.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
}
}

转载请注明：IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部 - 前端开发

该文章由前端开发于2013年03月13日发表在javascript分类下，你可以至底部留下评论。

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

关键字: ,

上一篇：

下一篇：

为您推荐

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

  • 2016-12-21五个典型的 JavaScript 面试题

    在IT界，需要大量的 JavaScript 开发者。如果你的能力能够胜任这一角色，那么你将获得许多更换工作和提高薪水的机会。但是在你被公司录取之前，你需要展现你的技术实力，以便通过...

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

    JavaScript 字符串用于存储和处理文本。因此在编写 JS 代码之时她总如影随形，在你处理用户的输入数据的时候，在读取或设置 DOM 对象的属性时，在操作 Cookie 时，在转换各种不同 ...

  • 2016-12-15js验证固定电话手机号码

    规则的国内固定电话和传真的格式基本都是带有0的区号+连接符“-”＋电话号码，另外还有可能有分机号，区号有3位、4位，电话号码有7位和8位的；其它格式的有前面不带0的，或者不带连...

  • 2016-12-15js去除重复并统计数量方法

    首先点击按钮触发事件，然后用class选择器，迭代要获取的文本（这里最好用text()方法）加入到Array()集合里。然后创建一个map{},遍历Array()集合，取一个值作为map的key,然后判断...

  • 2016-12-1510分钟让你的javascript登峰造极

    javascipt被称作前端的灵魂，没法灵活运用它，你的前端就只是一具行死走肉。大多初学者能顺利度过div+css，然后倒在了js怀抱，即时跨过了这一关，也只是会用，其底层原理一概不知...

  • 2016-12-15JavaScript禁止a标签超链接点击

    JavaScript禁止a超链点击，我们都知道让a超链接点击后不跳转,可以用href = “#”，但是这个#就会锚点到页面最上边，点击链接后不跳转可以在它后面加JavaScript点击事件 ...

  • 2016-07-01利用新浪api接口查询判断IP和地区信息

    大家平时经常能看到分类信息网站中能自动判断用户所在的地理位置，以前有一种很笨的方法就是把各地的数据段输入数据库或者一个文档中，通过查询判断用户的地理位置。当然这里的ip...

  • 2015-10-26js根据IP地址判断城市

    var province = '' ; var city = '' ; jQuery.getScript("http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js",function(){ province = remote_i...

  • 2014-11-25常用JS验证和函数

    下面是我常用一些JS验证和函数，有一些验证我直接写到了对象的属性里面了，可以直接通过对象.方法来调用 //浮点数除法运算 function fdiv(a, b, n) { if (n == undefined)...

  • 2014-11-25兼容IE浏览器的js浏览器全屏代码

    众所周知，IE是个奇葩的浏览器，但是由于用户量很大，开发者还是不得不为IE考虑一下，于是，各种浏览器相关的操作，都要多一个特别的判断——专门针对IE浏览器的判断，这里的全屏也...

猜你喜欢

大家正在看

阅读排行榜

热门标签

jquery实例 wap网站开发 网页设计 郑州网页设计 手机浏览器兼容 css经验 前端开发 jquery jquery特效 jquery插件 css bug 手机网站制作 css div web规范 3g网 郑州前端开发 web前端开发 手机网站开发

本月热门

www.wufangbo.com 前端开发-WEB前端开发-专业前端开发网站

郑州前端开发 | web前端开发 | 郑州页面重构 | 前端开发-WEB前端开发-专业前端开发网站 站点地图 关于我