详解页面滚动值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 相关文章推荐
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 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/12/05 PHP
数字转英文
2006/12/06 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
php中使用url传递数组的方法
2015/02/11 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
vue实现点击图片放大效果
2017/08/15 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
python 默认参数问题的陷阱
2016/02/29 Python
python多进程共享变量
2016/04/06 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
python中reader的next用法
2018/07/24 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
python 绘制国旗的示例
2020/09/27 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
佳能德国网上商店:Canon德国
2017/03/18 全球购物
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
如何撰写一封出色的求职信
2014/04/27 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
企业安全生产规章制度
2015/08/06 职场文书
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL
MySql数据库 查询时间序列间隔
2022/05/11 MySQL