各大浏览器下scrollTop的兼容

jerryloveemily 发布于2019-08-26 14:05 / 1099人阅读

摘要：而其他浏览器无论赋值或运算顺序如何都不会返回可以安全使用所以说到头还是的问题咯杯具精神有点恍惚，不知道有没有表达清楚。

$(window).unbind("scroll").bind("scroll", function () {
    var scrollTop = document.documentElement.scrollTop || window.pageYOffset ||                                                     
    document.body.scrollTop;
    if ($("").height() - scrollTop <= document.documentElement.clientHeight) {
    }
});

1、各浏览器下 scrollTop的差异
IE6/7/8：
对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度；
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop；
Safari:
safari 比较特别，有自己获取scrollTop的函数： window.pageYOffset ；
Firefox:
火狐等等相对标准些的浏览器就省心多了，直接用 document.documentElement.scrollTop ；
2、获取scrollTop值
完美的获取scrollTop 赋值短语：

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

通过这句赋值就能在任何情况下获得scrollTop 值。
仔细观察这句赋值，你发现啥了没？？
没错，就是 window.pageYOffset (Safari) 被放置在 || 的中间位置。
因为当数字0 与 undefine 进行或运算时，系统默认返回最后一个值。即或运算中 0 == undefine ;
当页面滚动条刚好在最顶端，即scrollTop值为 0 时。 IE 下 window.pageYOffset (Safari) 返回为 undefine ，此时将window.pageYOffset (Safari) 放在或运算最后面时， scrollTop 返回 undefine , undefine 用在接下去的运算就会报错咯。
而其他浏览器无论 scrollTop 赋值或运算顺序如何都不会返回 undefine. 可以安全使用..
所以说到头还是IE的问题咯. 杯具…
精神有点恍惚，不知道有没有表达清楚。
不过最后总结出来这句实验过OK，大家放心使用；

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

DTD相关说明：

页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。

页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。

在 IE 和 Firefox 中均是如此。

为了兼容，不管有没有 DTD，可以使用如下代码：

var scrollTop = window.pageYOffset  //用于FF
            || document.documentElement.scrollTop  
            || document.body.scrollTop  
            || 0;

documentElement 和 body 相关说明：

body是DOM对象里的body子节点，即标签；

documentElement 是整个节点树的根节点root，即标签；

DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。

以HTML超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中应该写：document.body。

————————————————
版权声明：本文为CSDN博主「12ers_梦骑士」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u010423...

云服务器 GPU云服务器兼容java的浏览器 js兼容浏览器兼容多浏览器兼容兼容多浏览器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110010.html

JS基础篇--了解JS的clientX、pageX、screenX等方法来获取鼠标坐标详解

摘要：相对浏览器窗口简单代码即可实现，然而这是还不够，因为绝大多数情况下我们希望获取鼠标点击位置相对于浏览器窗口的坐标，的，属性分别表示鼠标点击位置相对于文档的左边距，上边距。在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果，这篇文章就上鼠标点击位置坐标获取做一些简单的总结，没特殊声明代码在IE8...

phodal 2019-08-21 10:23 评论0 收藏0
完美实现一个“回到顶部”

摘要：在浏览器中，页面默认滚动是在标签上，移动端大多数在标签上，在我们想要实现平滑回到顶部，只需在这两个标签上都加上准确的说，写在容器元素上，可以让容器非鼠标手势触发的滚动变得平滑，而不局限于，标签。前言在实际应用中，经常用到滚动到页面顶部或某个位置，一般简单用锚点处理或用js将document.body.scrollTop设置为0，结果是页面一闪而过滚到指定位置，不是特别友好。我们想要...

layman 2019-08-29 17:08 评论0 收藏0
完美实现一个“回到顶部”

摘要：在浏览器中，页面默认滚动是在标签上，移动端大多数在标签上，在我们想要实现平滑回到顶部，只需在这两个标签上都加上准确的说，写在容器元素上，可以让容器非鼠标手势触发的滚动变得平滑，而不局限于，标签。前言在实际应用中，经常用到滚动到页面顶部或某个位置，一般简单用锚点处理或用js将document.body.scrollTop设置为0，结果是页面一闪而过滚到指定位置，不是特别友好。我们想要...

littlelightss 2019-08-23 12:36 评论0 收藏0
小程序项目入坑实践

摘要：公司由于小程序原开发需求变动，产品决定重新开始设计新的小程序，人员紧张，导致我接了这个坑。输入数字一般项目可能都会碰到金额的输入限制，这里小程序组件，可利用，来控制输入只能是数值和小数点。公司由于小程序原开发需求变动，产品决定重新开始设计新的小程序，人员紧张，导致我接了这个坑~。原开发时准备使用 mpvue 来开发，前篇文章介绍了一些关于mpvue的写法，后来在我将简易框架搭建后，发...

zhjx922 2019-08-22 18:02 评论0 收藏0
【转】scrollTop为0的问题

摘要：所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。不过加上后，则显示正常。即获取高度时使用，经测试，代码在下都能显示正常了。主要是浏览器的模式，有两个，。其中前者是怪异模式，后者是标准模式。原文地址http://wo13145219.iteye.com/blog/2001598 一、先遇到document.body.scrollTop值为0的问题　　做页面的时候可能会用到位置...

pakolagij 2019-08-19 18:15 评论0 收藏0