详解页面滚动值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 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
node.js实现上传文件功能
Jul 15 Javascript
javascript异常处理实现原理详解
Feb 17 Javascript
Vue性能优化的方法
Jul 30 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
继续学习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中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
用Webpack构建Vue项目的实践
2017/11/07 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
Python中使用partial改变方法默认参数实例
2015/04/28 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
大学生表扬信范文
2014/01/09 职场文书
房地产项目建议书
2014/03/12 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书