详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
最近做了个项目，其中有一目录功能，发现一个在现代浏览器间的一个bug，或是称之为差异，即页面滚动值(scrollTop)的获取与设定。
在此之前先说一下关于页面元素的坐标获取，这张图的经典性不必再提。
实现滚动到某位置功能
博客目录的一个最主要的功能就是实现点击标题页面滚动，因为我们要滚动到页面某个标题，所以需要计算出滚动这个元素的具体绝对位置，而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量，此处不适用。
此处应使用浏览器原生提供的 getBoundingClientRect 接口，此函数返回的是元素距离浏览器各边距的绝对位置，跟是什么定位类型的无关，非常适合制作页面滚动效果。
关于getBoundingClientRect函数的具体用法可以参见以下链接：链接1，链接2。
获取滚动需要的数据， body 的 scrollTop 即页面已经被滚动所隐藏的高度，再根据上面提到的接口获取元素距离浏览器顶部的距离，可以算出需要的滚动的高度，关系图如下：
遂，页面要滚动到的位置就是：
document.body.scrollTop+element.getBoundingClientRect().top;
这里顺带说下 getBoundingClientRect().top 获取的元素在被滚动隐藏与非滚动时的区别：
如上图可以看出，即使要滚动到的元素部分在浏览器边界外，获取到的top即为负数，遂计算出来的页面高度依然是正确的。
点击目录跳转的功能就做完了，至今为止都很完美。
FireFox与Chrome的scrollTop的兼容问题
直到我今天在FireFox测试时发现，火狐下页面滚动的跳转功能无法使用。
1、原生接口测试
这里先提一下：
document.documentElement 即 <html> 元素，而 document.body 即 <body> 元素。
测试结果，在火狐上只能通过html元素来获取和设定页面滚动高度，而在谷歌上反之只能用body元素来获取和设定。
2、jquery接口测试
上面是使用原生的scrollTop属性来获取与设定，而jquery自己也实现了对scrollTop属性的封装，可以试试他的兼容性。
发现采用 $(document) 可以实现对获取和设定scrollTop的兼容，大喜。
3、scrollTop动画实现测试
虽然实现了兼容，但为了有更好的效果，我希望采用动画的方式滚动到页面的某位置，而不是直接跳转，这里采用jquery的 animate 函数来实现。
发现虽然可以采用$(document)来实现获取和设定，但动画效果都无法使用，还是只能用body元素和html元素来实现。
最终解决方案
遂最完美的实现方案是：
获取或直接设定当前页面滚动高度：
$(document).scrollTop();//获取，兼容火狐谷歌
有动画效果的设定当前页面滚动高度：
$("body,html").animate({ scrollTop: ... });//动画滚动效果，兼容火狐谷歌
最终效果可以点击本篇文章顶部的目录链接来查看效果：
jQuery CSS 操作 - scrollTop() 方法
实例
设置 <div> 元素中滚动条的垂直偏移：
$(".btn1").click(function(){
$("div").scrollLeft(100);
});
定义和用法
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。
语法
$(selector).scrollTop(offset)
| 参数 | 描述 |
|---|---|
| offset | 可选。规定相对滚动条顶部的偏移，以像素计。 |
提示和注释
注释：该方法对于可见元素和不可见元素均有效。
注释：当用于获取值时，该方法只返回第一个匹配元素的 scroll top offset。
注释：当用于设置值时，该方法设置所有匹配元素的 scroll top offset。
- top、clientTop、scrollTop、offsetTop
- 在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
- scrollTop 用法说明
- jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、Chrome、Opera
- jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
- js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
- 兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
- 关于scrollLeft,scrollTop的浏览器兼容性测试
- jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
- C++获取多浏览器上网历史记录示例代码(支持获取IE/Chrome/FireFox)
- jQuery动画效果animate和scrollTop结合使用实例
- 浅谈jQuery页面的滚动位置scrollTop、scrollLeft
- 解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
相关文章
jquery bind(click)传参让列表中每行绑定一个事件
用jquey bind 点击事件时，传参不注意可能会导致点击每一行都是显示相同内容的情况,下面有个示例，感兴趣的朋友可以参考下2014-08-08
我们希望表单提交以后，能reset，由于jquery没有这个方法，所以只能采用其他的方法来实现了，具体如下，有此需求的朋友可以参考下，希望对大家有所帮助2013-08-08
这篇文章主要为大家详细介绍了jquery添加div实现消息聊天框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
最近在做权限功能的时候，采用的ztree实现的，但是产品要求最后一层的权限节点要横向显示。下面小编把基于ztree实现权限横向显示功能的实现思路分享给大家，供大家参考2017-05-05
这篇文章介绍了jquery设置控件位置的方法，有需要的朋友可以参考一下2013-08-08
这篇文章主要为大家详细介绍了Jquery实现下拉菜单案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
本篇文章小编为大家介绍，使用jQuery获取浏览器中的分辨率的方法。需要的朋友参考下2013-04-04
当收到消息的时候能够及时的刷新,显示收到消息的条数，下面与大分享下使用简单的代码实现jquery定时器2013-11-11
这篇文章主要介绍了jQuery无刷新分页实现方法,以完整实例形式分析了jQuery实现分页的数值计算与元素操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要介绍了Jquery中find与each方法用法,实例分析了find与each方法的功能、定义与使用技巧,需要的朋友可以参考下2015-02-02
最新评论