需求

最近在做博客的目录功能，发现一个在现代浏览器间的一个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浏览器间的兼容问题的更多相关文章

  1. （二）Fiddler抓取Firefox、Chrome浏览器上的https协议

    Fiddler抓取Firefox.Chrome浏览器上的https协议 安装Fiddler后默认只抓取http协议,如果是https协议的话,浏览器就会提示"您的链接并不安全". ...

  2. [转]IE、FireFox、Chrome浏览器中关于URL传参中文乱码，解决兼容性问题！

    原文地址:https://cloud.tencent.com/developer/article/1334736 前台用url传值中文,后台用request.getParameter接收参数.在Fir ...

  3. IE 、Firefox、Chrome 浏览器在 F12 控制台下切换至不同框架介绍

    有不少网页的页面,还在使用 iframe 标签,而此时,相当于页面有两个 window 对象,一个为当前页面 window ,另一个则为 iframe 页面下的 window .因为,有时候需要在 c ...

  4. selenium如何分别启动IE、firefox、chrome浏览器

    1.火狐浏览器 /* * 初始化火狐浏览器 * */ public static WebDriver initFireFox(WebDriver dr) { String key = "we ...

  5. Firefox和Chrome浏览器导出书签

    Chrome浏览器: 或者直接在地址栏中输入:“chrome://bookmarks/#1”也可以 Firefox浏览器:

  6. 怎样下载Firefox与Chrome浏览器驱动

    在浏览器地址栏输入https://www.seleniumhq.org/ 打开Selenium官网 下载Firefox浏览器驱动 解压到本地 下载Chrome浏览器驱动 解压到本地 把这2个驱动放到P ...

  7. 兼容ie6，ie7，ie8，firefox，chrome浏览器的代码片段

    hack实现方式和原理 #hacker{ color:red; *color:white; /*for ie6,ie7*/ *+color:blue; /*for ie7*/ _color:gray; ...

  8. Chrome firefox ie等浏览器空格(&nbsp;)兼容问题

    使用(&nbsp:)空格浏览器之间,显示的不一样,对不起等现象. 解决方案: 用半角空格&ensp:或者全角空格&emsp:就可以了,&ensp:相当于半格中文字符的宽 ...

  9. 加载Firefox 和 chrome 浏览器配置

    Firefox: Chrome:

随机推荐

  1. 最短路径之迪杰斯特拉（Dijkstra）算法

    迪杰斯特拉(Dijkstra)算法主要是针对没有负值的有向图,求解其中的单一起点到其他顶点的最短路径算法.本文主要总结迪杰斯特拉(Dijkstra)算法的原理和算法流程,最后通过程序实现在一个带权值的 ...

  2. 使用Spring整合Hibernate，并实现对数据表的增、删、改、查的功能

    1.1 问题 使用Spring整合Hibernate,并实现资费表的增.删.改.查. 1.2 方案 Spring整合Hibernate的步骤: 1.3 步骤 实现此案例需要按照如下步骤进行. 采用的环 ...

  3. 烂泥：虚拟化KVM安装与配置

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 最近打算把公司的服务器全部做成虚拟化,一是跟有效的利用了服务器,二也是对自己是一个学习的机会. KVM的安装与配置步骤如下: 1. 查看是否支持虚拟化 ...

  4. 安装SQL Server2008，要重启机器,解决办法

    安装SQL Server2008时,总提示有挂起,要重启机器:重启之后还是有相应的提示,该怎么办呢? 其实只要删除一个注册表项就可以了: 1.  打开注册表编辑器 开始菜单—>运行->re ...

  5. javascript 内部对象（1）——Math 对象

    Math是javascript中的内部对象之一,主要用于处理数学方面的任务,是一种静态对象.和其他动态对象如Date.String等不同的是它没有构造函数Math(),可以直接使用属性和方法. 例如使 ...

  6. nginx 做负载均衡

    最近正在研究Nginx,Nginx作为反向代理服务器,可以对Web服务器提供加速,并且具有负载均衡的功能. 首先我要在官网下载Nginx(http://nginx.org/en/download.ht ...

  7. JavaScript生成GUID的算法

    全局唯一标识符(GUID,Globally Unique Identifier)也称作 UUID(Universally Unique IDentifier) . GUID是一种由算法生成的二进制长度 ...

  8. js模板

    作用 适合用于定义模板(模板容器),不解析(渲染/执行). 为什么这样使用 在js里面,经常需要使用js往页面中插入html内容.比如这样: var number = 123; $('#d').app ...

  9. Linux搭建DNS服务器

    Linux系统信息: Version: Centos 6.6 Ip address:10.0.0.104 Hostname: extmail.com 配置系统 hostname Vim /etc/sy ...

  10. log4j加载方式导致的bae和sae部署异常

    这2天改在bae上部署代码,为了便于程序的功能测试,引入了log4j日志,但是问题来了..测试程序采用的是spring3.2.8框架搭建,web.xml引入日志代码为: <context-par ...