详解页面滚动值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 相关文章推荐
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
Vue实现计算器计算效果
Aug 17 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
PHP的历史和优缺点
2006/10/09 PHP
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
js获取图片长和宽度的代码
2009/11/24 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
如何基于python操作excel并获取内容
2019/12/24 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
模具专业推荐信
2013/10/30 职场文书
会计学毕业生求职信
2014/06/25 职场文书
银行进社区活动总结
2014/07/07 职场文书
学校端午节活动方案
2014/08/23 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
退休欢送会主持词
2015/07/01 职场文书
生产设备维护保养制度
2015/08/06 职场文书
应收账款管理制度
2015/08/06 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
OpenCV实现反阈值二值化
2021/11/17 Java/Android