详解页面滚动值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 相关文章推荐
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
Vue路由守卫之路由独享守卫
Sep 25 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使用异或实现的加密解密实例
2013/09/04 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
图片自动更新(说明)
2006/10/02 Javascript
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
JavaScript编写开发动态时钟
2020/07/29 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
Python机器学习之决策树算法
2017/12/22 Python
python中set()函数简介及实例解析
2018/01/09 Python
python3 求约数的实例
2019/12/05 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
Django URL参数Template反向解析
2020/11/24 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
美国在线印刷公司:PsPrint
2017/10/12 全球购物
文员岗位职责范本
2014/03/08 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
护士个人年度总结范文
2015/02/13 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
大学生支教感言
2015/08/01 职场文书