详解页面滚动值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 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
jquery禁用右键示例
Apr 28 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 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
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
理解Javascript_03_javascript全局观
2010/10/11 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
在校生党员自我评价
2013/09/25 职场文书
药品采购员岗位职责
2014/02/08 职场文书
学生实习证明范文
2014/09/28 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python
java如何实现socket连接方法封装
2021/09/25 Java/Android
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
Redis唯一ID生成器的实现
2022/07/07 Redis