关于页面滚动值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: ... });//动画滚动效果，兼容火狐谷歌
最终效果可以点击本篇文章顶部的目录链接来查看效果：
扩展阅读
1、cssom视图模式cssom-view-module相关整理与介绍
2、getBoundingClientRect() 来获取页面元素的位置
(完)
原文地址-http://www.cnblogs.com/xxcanghai/p/5015712.html
关于页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题的更多相关文章
- （二）Fiddler抓取Firefox、Chrome浏览器上的https协议
Fiddler抓取Firefox.Chrome浏览器上的https协议 安装Fiddler后默认只抓取http协议,如果是https协议的话,浏览器就会提示"您的链接并不安全". ...
- [转]IE、FireFox、Chrome浏览器中关于URL传参中文乱码，解决兼容性问题！
原文地址:https://cloud.tencent.com/developer/article/1334736 前台用url传值中文,后台用request.getParameter接收参数.在Fir ...
- IE 、Firefox、Chrome 浏览器在 F12 控制台下切换至不同框架介绍
有不少网页的页面,还在使用 iframe 标签,而此时,相当于页面有两个 window 对象,一个为当前页面 window ,另一个则为 iframe 页面下的 window .因为,有时候需要在 c ...
- selenium如何分别启动IE、firefox、chrome浏览器
1.火狐浏览器 /* * 初始化火狐浏览器 * */ public static WebDriver initFireFox(WebDriver dr) { String key = "we ...
- Firefox和Chrome浏览器导出书签
Chrome浏览器: 或者直接在地址栏中输入:“chrome://bookmarks/#1”也可以 Firefox浏览器:
- 怎样下载Firefox与Chrome浏览器驱动
在浏览器地址栏输入https://www.seleniumhq.org/ 打开Selenium官网 下载Firefox浏览器驱动 解压到本地 下载Chrome浏览器驱动 解压到本地 把这2个驱动放到P ...
- 兼容ie6，ie7，ie8，firefox，chrome浏览器的代码片段
hack实现方式和原理 #hacker{ color:red; *color:white; /*for ie6,ie7*/ *+color:blue; /*for ie7*/ _color:gray; ...
- Chrome firefox ie等浏览器空格( )兼容问题
使用( :)空格浏览器之间,显示的不一样,对不起等现象. 解决方案: 用半角空格&ensp:或者全角空格&emsp:就可以了,&ensp:相当于半格中文字符的宽 ...
- 加载Firefox 和 chrome 浏览器配置
Firefox: Chrome:
随机推荐
- 关于PHP中Session文件过多的问题
PHP的默认机制:每一次php请求,会有1/100的概率(默认值)触发“session回收”.如果“session回收”发生,那就会检查/tmp/sess_*的文件,如果最后的修改时间到现在超过了14 ...
- GDI学习之俄罗斯方块
做个玩玩 public Form1() { InitializeComponent(); } #region 定义砖块int[i,j,y,x] Tricks:i为那块砖,j为状态,y为列,x为行 pr ...
- mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
本人开发项目时,在从一个服务器导出数据库到另一服务器时,存储过程中,报Incorrect DECIMAL value: '0' for column '' at row -1错误. 原因: 存储过程中 ...
- mysql管理（一）
创建数据库,并指定默认字符集和排序规则:help create database;create {database|schema} [if not exists] db_name [character ...
- 关于统计变换（CT/MCT/RMCT）算法的学习和实现
原文地址http://blog.sina.com.cn/s/blog_684c8d630100turx.html 刚开会每周的例会,最讨厌开会了,不过为了能顺利毕业,只能忍了.闲话不多说了,下面把上周 ...
- HTML5 datalist 标签
以前需要用JS写一个自动完成组件(Suggest),很费劲.HTML5时代则不用了,直接使用datalist标签,直接减少了工作量.如下 <!DOCTYPE html> <html& ...
- 从mysql数据表中随机取出一条记录
核心查找数据表代码: ; //此处的1就是取出数据的条数 但这样取数据网上有人说效率非常差的,那么要如何改进呢 搜索Google,网上基本上都是查询max(id) * rand()来随机获取数据. S ...
- linux搭建一个配置简单的nginx反向代理服务器 2个tomcat
1.我们只要实现访问nginx服务器能跳转到不同的服务器即可,我本地测试是这样的, 在nginx服务器里面搭建了2个tomcat,2个tomcat端口分别是8080和8081,当我输入我nginx服务 ...
- Armstrong数
题目描述 在三位的整数中,例如153可以满足1^3 + 5^3 + 3^3 = 153,这样的数称之为Armstrong数.将所有的Armstrong数按小到大排序,试写出一程序找出指定序号的三位Ar ...
- HFSS学习（一）计划
2015-11-28 21:05:33 基本概念 边界条件 激励源 建模 网格划分 变量设置与调谐优化 仿真结果 实例 微带线仿真 Ku波段微带线发夹线滤波器仿真 介质滤波器 腔体滤波器 微带一分四功 ...