scrolltop 原生js_解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法...
最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定。
在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提。
实现滚动到某位置功能
一个最主要的功能就是实现点击标题页面滚动,因为我们要滚动到页面某个标题,所以需要计算出滚动这个元素的具体绝对位置,而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量,此处不适用。
此处应使用浏览器原生提供的getBoundingClientRect接口,此函数返回的是元素距离浏览器各边距的绝对位置,跟是什么定位类型的无关,非常适合制作页面滚动效果。
获取滚动需要的数据, body 的 scrollTop 即页面已经被滚动所隐藏的高度,再根据上面提到的接口获取元素距离浏览器顶部的距离,可以算出需要的滚动的高度,关系图如下:
遂,页面要滚动到的位置就是:
document.body.scrollTop+element.getBoundingClientRect().top;
这里顺带说下getBoundingClientRect().top获取的元素在被滚动隐藏与非滚动时的区别:
如上图可以看出,即使要滚动到的元素部分在浏览器边界外,获取到的top即为负数,遂计算出来的页面高度依然是正确的。
点击目录跳转的功能就做完了,至今为止都很完美。
FireFox与Chrome的scrollTop的兼容问题
直到我今天在FireFox测试时发现,火狐下页面滚动的跳转功能无法使用。
1、原生接口测试
这里先提一下:
document.documentElement 即 元素,而document.body即
元素。
测试结果,在火狐上只能通过html元素来获取和设定页面滚动高度,而在谷歌上反之只能用body元素来获取和设定。
2、jquery接口测试
上面是使用原生的scrollTop属性来获取与设定,而jquery自己也实现了对scrollTop属性的封装,可以试试他的兼容性。
发现采用 $(document) 可以实现对获取和设定scrollTop的兼容,大喜。
3、scrollTop动画实现测试
虽然实现了兼容,但为了有更好的效果,我希望采用动画的方式滚动到页面的某位置,而不是直接跳转,这里采用jquery的 animate 函数来实现。
发现虽然可以采用$(document)来实现获取和设定,但动画效果都无法使用,还是只能用body元素和html元素来实现。
最终解决方案
遂最完美的实现方案是:
获取或直接设定当前页面滚动高度:
$(document).scrollTop();//获取,兼容火狐谷歌
有动画效果的设定当前页面高度:
$("body,html").animate({ scrollTop: ... });//动画滚动效果,兼容火狐谷歌
以上就是解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法,希望对大家的学习有所帮助。
scrolltop 原生js_解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法...相关推荐
- scrollTop在FireFox与Chrome浏览器间的兼容问题
FireFox与Chrome的scrollTop的兼容问题 直到我今天在FireFox测试时发现,火狐下页面滚动的跳转功能无法使用. 1.原生接口测试 这里先提一下: document.documen ...
- 用jquery实现平滑的页面滚动效果
用jquery实现平滑的页面滚动效果 通过几句jquery代码实现页面平滑滚动到某一锚点的效果.实现代码来源于 https://css-tricks.com/snippets/jquery/smoot ...
- 页面滚动效果库,有点儿皮!
一分钟,让页面滚动更有趣 前段时间刚给大家推荐了一个强大易用的跨平台 CSS3 动画库 Animate.css,内置了很多常用的 CSS 动画,可以一行代码让页面动起来. 今天再推荐它的堂弟,WOW. ...
- html右侧浮动栏随着滚动,jQuery实现div浮动层跟随页面滚动效果
jQuery实现浮动层跟随页面滚动效果 #main{height:2000px} .demo{width:180px; height:250px; margin:10px; border:2px so ...
- JQuery——BreakingNews.js新闻滚动效果
BreakingNews.js新闻滚动效果 这里是直观效果展示 使用这种效果我们需要三个包 jq.min.js BreakingNews.css breakingnews.js breakingnew ...
- [转]IE、FireFox、Chrome浏览器中关于URL传参中文乱码,解决兼容性问题!
原文地址:https://cloud.tencent.com/developer/article/1334736 前台用url传值中文,后台用request.getParameter接收参数.在Fir ...
- 【兼容性解决】页面滚动距离document.documentElement.scrollTop兼容性问题
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
- html js 链接滚动效果,【JS特效】不间断滚动效果通用类
网上发现一个不错的js不间断滚动效果,今天来转载一下吧.这个js的作者应是崔永祥(因其博客已不存在,而无法确认),我这里只简单整理,只为笔记. ??? 需要通过样式,js来实现这个翻滚效果. ??? ...
- 滚动条禁止_Axure 教程:不可见滚动条的页面滚动效果
在设计产品原型的过程中,经常会遇到这样的一种场景--所要展示的内容,超出了当前可视页面范围.遇到这种情况,通常使用Axure动态面板的滚动条设置来解决. 产品原型设计是产品经理每日或周期性必须经历的事 ...
最新文章
- 关于xilinx fir use reloadable coefficient的用法
- DataGridView控件60招(一)
- pytorch 查看gpu cuda版本
- java+实现集合并运算_JAVA程序设计报告+集合运算
- BIRT:基于 Eclipse 的报表
- double类型计算
- java 制作类似DOS功能
- Web安全相关(三):开放重定向(Open Redirection)
- ssis 列转换_SSIS组播转换概述
- AngularJS 之 ng-model
- NS和DNS的区别有哪些?
- 25个常用Matplotlib图的Python代码,爱了爱了
- 当前系统缺少NTFS格式转换器(convert.exe)
- Nginx 配置优化
- 【CDN加速】项目前端性能优化之开启CDN加速
- 2018年最新old男孩python全栈第九期课程-大牛编程吧-Python编程精品区-大牛编程吧
- 嘉兴 机器人仓库 菜鸟_菜鸟在嘉兴推出全新智能仓 在“双11”启用超级机器人仓群...
- exception1:unicodeescape’ codec can’t decode bytes in position XXX: trun错误解决方案
- 小猿圈IT自学分享-自学编程需要克服的困难
- 计算机毕业设计JavaVue框架电商后台管理系统(源码+系统+mysql数据库+lw文档)