详解页面滚动值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。

赞 (0)

相关推荐

  • js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)

    文本框: 复制代码 代码如下: <input type="text" onkeydown="keydownsearch(event)" /> js代码: 复制代码 代码如下: function keydownsearch(evt) { evt = (evt) ? evt : ((window.event) ? window.event : "") keyCode = evt.keyCode ? evt.keyCode : (evt.w

  • 解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法

    解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法

    最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实现滚动到某位置功能 一个最主要的功能就是实现点击标题页面滚动,因为我们要滚动到页面某个标题,所以需要计算出滚动这个元素的具体绝对位置,而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量,此处不适用. 此处应使用浏览器原生提供的 getBoundingClientRect 接口,此

  • jQuery动画效果animate和scrollTop结合使用实例

    CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color:red"). 复制代码 代码如下: $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 上面的代码表示滚动条跳到0的位置,页面移动速度是800.结合scrollTop实用示例: 复制代码

  • 浅谈jQuery页面的滚动位置scrollTop、scrollLeft

    Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候,一部分文档会从视线中消失.例如,Web页面不能完全放入浏览器窗口中,文档会向左或向上滚动,因此,页面的顶部和左边都会消失在视野之内.这意味着浏览器窗口的左上角和文档的左上角并不相同.如果试图放置一个新元素,例如,屏幕顶部的一个动态Banner:而如果只是试图将元素的left和top位置设置为0,将

  • jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>jQuery的位置

  • top、clientTop、scrollTop、offsetTop

    top、clientTop、scrollTop、offsetTop

    top.clientTop.scrollTop.offsetTop 图示说明如下: 51windows.Net var s = ""; s += "\r\n网页可见区域宽:"+ document.body.clientWidth; s += "\r\n网页可见区域高:"+ document.body.clientHeight; s += "\r\n网页可见区域宽:"+ document.body.offsetWidth +&q

  • jquery scrollTop方法根据滚动像素显示隐藏顶部导航条

    本文使用jquery的scrollTop方法监视页面垂直滚动像素,并根据像素隐藏或者显示顶部的导航条. 效果预览网址:http://www.keleyi.com/keleyi/phtml/scrolloversee.htm scrollTop的介绍: 语法 $(selector).scrollTop(offset) 参数 offset 描述 可选.规定相对滚动条顶部的偏移,以像素计. 定义和用法 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置. scroll top offse

  • 关于scrollLeft,scrollTop的浏览器兼容性测试

    今天在修改原群组弹窗的时候,发现弹窗在谷歌浏览器chrome下的位置跟在别的浏览器下不一样.逐一排查,肯定是在计算窗口位置的时候,少加了scrollTop这个值.在查看源代码的时候发现直接采用 document.documentElement.scrollTop这个,但在chrome下这个值为0. 在有文档声明的情况下,也就是第一行有个dtd声明,标准浏览器认识document.documentElement.scrollTop,可chrome竟然不认识这斯.在没有文档声明的情况下,chrome

  • 在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript

    Javascript Debug Toolkit 是一个开源免费的eclipse插件,官方主页:http://code.google.com/p/jsdt 下图给出一个调试工具支持的浏览器对照表 工具\浏览器 Ie Firefox Safari Chrome Opera 其他 VS.net 支持 Microsoft Script Debugger 支持 Firebug 支持 venkman 支持 NebBeans 支持 支持 Aptana 支持 支持 Eclipose ATF 支持 MyEcli

  • scrollTop 用法说明

    下面的演示中,外层元素的高度值是200px,内层元素的高度值是300px.很明显,"外层元素中的内容"高过了"外层元素"本身.当向下拖动滚动条时,有部分内容会隐没在"外层元素的上边界"之外,scrollTop就等于这部分"不可见的内容"的高度. 演示:(拖动滚动条,可以看到scrollTop值的变化) 这些文字显示在内层元素中. scrollTop值是: 这些文字显示在内层元素中. [Ctrl+A 全选 注:如需引入外部Js需

  • C++获取多浏览器上网历史记录示例代码(支持获取IE/Chrome/FireFox)

    C++获取多浏览器上网历史记录示例代码(支持获取IE/Chrome/FireFox)

    复制代码 代码如下: // FileName: BrowsHistory.h // ------------------------------------------------------------------------------------------------------------------------// Remarks://   BrowsHistory对象应该设置成全局,或者静态:防止还没有获取完网址,对象就析构了:// ------------------------

  • jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、Chrome、Opera

    jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、Chrome、Opera

    要实现可编辑的表格功能,我们要解决以下问题: 1.明确要修改的数据在表格中是哪些列(如何找到这些单元格); 2.如何让单元格变成可以编辑的; 3.如何处理单元格的一些按键事件; 4.解决跨浏览器问题. 我们通过jQuery可以一步一步解决上述问题. 一. 绘制表格 首先我们先画好一个表格. Code1: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww

  • 兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码

    在编写处理xml的网页时,经常为浏览器兼容性头疼.于是我将常用的xml操作封装为函数.经过一段时间的改进,现在已经很稳定了,用起来很舒服. 函数有-- xml_loadFile:xml同步/异步加载. xml_transformNode:xsl转换. xml_text:节点的文本. selectSingleNode:根据XPath选择单个节点. selectNodes:根据XPath选择多个节点. 全部代码(zyllibjs_xml.js)-- 复制代码 代码如下: /* zyllibjs_xm

随机推荐