详解页面滚动值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 相关文章推荐
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
详细分析JavaScript中的深浅拷贝
Sep 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 empty函数判断mysql表单是否为空
2010/04/12 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
js实现登录与注册界面
2017/11/01 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
python实现通过shelve修改对象实例
2014/09/26 Python
用python处理MS Word的实例讲解
2018/05/08 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
python中几种自动微分库解析
2019/08/29 Python
基于opencv实现简单画板功能
2020/08/02 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
触摸春天教学反思
2014/02/03 职场文书
中考冲刺决心书
2014/03/11 职场文书
质量管理标语
2014/06/12 职场文书
政府采购方案
2014/06/12 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
Python3的进程和线程你了解吗
2022/03/16 Python
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers