详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题


Posted in Javascript onDecember 03, 2015

最近做了个项目,其中有一目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定。

在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提。

详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

实现滚动到某位置功能

博客目录的一个最主要的功能就是实现点击标题页面滚动,因为我们要滚动到页面某个标题,所以需要计算出滚动这个元素的具体绝对位置,而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量,此处不适用。

此处应使用浏览器原生提供的 getBoundingClientRect 接口,此函数返回的是元素距离浏览器各边距的绝对位置,跟是什么定位类型的无关,非常适合制作页面滚动效果。

关于getBoundingClientRect函数的具体用法可以参见以下链接:链接1,链接2。

获取滚动需要的数据, body 的 scrollTop 即页面已经被滚动所隐藏的高度,再根据上面提到的接口获取元素距离浏览器顶部的距离,可以算出需要的滚动的高度,关系图如下:

详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

遂,页面要滚动到的位置就是:

document.body.scrollTop+element.getBoundingClientRect().top;

这里顺带说下 getBoundingClientRect().top 获取的元素在被滚动隐藏与非滚动时的区别:

详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

如上图可以看出,即使要滚动到的元素部分在浏览器边界外,获取到的top即为负数,遂计算出来的页面高度依然是正确的。

点击目录跳转的功能就做完了,至今为止都很完美。

FireFox与Chrome的scrollTop的兼容问题

直到我今天在FireFox测试时发现,火狐下页面滚动的跳转功能无法使用。

1、原生接口测试

详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

这里先提一下:

 详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

document.documentElement  即 <html> 元素,而 document.body  即  <body> 元素。

测试结果,在火狐上只能通过html元素来获取和设定页面滚动高度,而在谷歌上反之只能用body元素来获取和设定。

2、jquery接口测试

上面是使用原生的scrollTop属性来获取与设定,而jquery自己也实现了对scrollTop属性的封装,可以试试他的兼容性。

详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

发现采用 $(document) 可以实现对获取和设定scrollTop的兼容,大喜。

3、scrollTop动画实现测试

虽然实现了兼容,但为了有更好的效果,我希望采用动画的方式滚动到页面的某位置,而不是直接跳转,这里采用jquery的 animate 函数来实现。

详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

发现虽然可以采用$(document)来实现获取和设定,但动画效果都无法使用,还是只能用body元素和html元素来实现。

最终解决方案

遂最完美的实现方案是:

获取或直接设定当前页面滚动高度:

$(document).scrollTop();//获取,兼容火狐谷歌

有动画效果的设定当前页面滚动高度:

$("body,html").animate({ scrollTop: ... });//动画滚动效果,兼容火狐谷歌

最终效果可以点击本篇文章顶部的目录链接来查看效果:

详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

jQuery CSS 操作 - scrollTop() 方法

实例

设置 <div> 元素中滚动条的垂直偏移:

$(".btn1").click(function(){
 $("div").scrollLeft(100);
});

定义和用法

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移。

语法

$(selector).scrollTop(offset)

参数 描述
offset 可选。规定相对滚动条顶部的偏移,以像素计。

提示和注释

注释:该方法对于可见元素和不可见元素均有效。
注释:当用于获取值时,该方法只返回第一个匹配元素的 scroll top offset。
注释:当用于设置值时,该方法设置所有匹配元素的 scroll top offset。

Javascript 相关文章推荐
js event事件的传递与冒泡处理
Dec 06 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
JavaScript实现世界各地时间显示
Sep 07 Javascript
原生JavaScript实现购物车
Jan 10 Javascript
继续学习javascript闭包
Dec 03 #Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 #Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 #Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 #Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 #Javascript
JS使用post提交的两种方式
Dec 03 #Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 #Javascript
You might like
下载文件的点击数回填
2006/10/09 PHP
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现微信自动回复机器人功能
2019/07/11 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
最热门的自我评价
2013/12/30 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
写给女朋友的道歉信
2014/01/12 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
战略合作意向书范本
2014/04/01 职场文书
加入学生会演讲稿
2014/04/24 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
2015年仓库工作总结
2015/04/09 职场文书
幸福终点站观后感
2015/06/04 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android