位置: 编程技术 - 正文

解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法(js页面滚动到指定位置)

编辑:rootadmin

推荐整理分享解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法(js页面滚动到指定位置),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js控制滚动条到页面某个位置,js控制滚动条到页面某个位置,js前端页面滚动事件,js页面滚动到指定div,js前端页面滚动事件,解决js页面滚动问题,解决js页面滚动问题,js页面滚动到指定div,内容如对您有帮助,希望把文章链接给更多的朋友!

最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定。

在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提。

实现滚动到某位置功能

一个最主要的功能就是实现点击标题页面滚动,因为我们要滚动到页面某个标题,所以需要计算出滚动这个元素的具体绝对位置,而常用的offsetTop是获取到当前元素与之最近的决定其定位的元素的偏移量,此处不适用。

此处应使用浏览器原生提供的 getBoundingClientRect 接口,此函数返回的是元素距离浏览器各边距的绝对位置,跟是什么定位类型的无关,非常适合制作页面滚动效果。

获取滚动需要的数据, body 的 scrollTop 即页面已经被滚动所隐藏的高度,再根据上面提到的接口获取元素距离浏览器顶部的距离,可以算出需要的滚动的高度,关系图如下:

遂,页面要滚动到的位置就是:

这里顺带说下getBoundingClientRect().top 获取的元素在被滚动隐藏与非滚动时的区别:

如上图可以看出,即使要滚动到的元素部分在浏览器边界外,获取到的top即为负数,遂计算出来的页面高度依然是正确的。

点击目录跳转的功能就做完了,至今为止都很完美。

FireFox与Chrome的scrollTop的兼容问题

直到我今天在FireFox测试时发现,火狐下页面滚动的跳转功能无法使用。

解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法(js页面滚动到指定位置)

1、原生接口测试

这里先提一下:

document.documentElement 即 <html> 元素,而 document.body 即 <body> 元素。

测试结果,在火狐上只能通过html元素来获取和设定页面滚动高度,而在谷歌上反之只能用body元素来获取和设定。

2、jquery接口测试

上面是使用原生的scrollTop属性来获取与设定,而jquery自己也实现了对scrollTop属性的封装,可以试试他的兼容性。

发现采用 $(document) 可以实现对获取和设定scrollTop的兼容,大喜。

3、scrollTop动画实现测试

虽然实现了兼容,但为了有更好的效果,我希望采用动画的方式滚动到页面的某位置,而不是直接跳转,这里采用jquery的 animate 函数来实现。

发现虽然可以采用$(document)来实现获取和设定,但动画效果都无法使用,还是只能用body元素和html元素来实现。

最终解决方案

遂最完美的实现方案是:

获取或直接设定当前页面滚动高度:

有动画效果的设定当前页面高度:

标签: js页面滚动到指定位置

本文链接地址:https://www.jiuchutong.com/biancheng/387092.html 转载请保留说明!

上一篇:JS使用post提交的两种方式(javascript post语法)

下一篇:java必学必会之static关键字(javastudio)

  • 结转所得税的会计分录是什么
  • 防伪税控税务端官网
  • 建筑业属于货物行业吗
  • 变更了公司名称以前的发票还可以抵扣吗
  • 小规模缴纳增值税税控系统可以抵扣么
  • 公司用股东的钱交税吗
  • 应收账款计提坏账后收回的会计分录
  • 拍卖土地支付的法律依据
  • 递延纳税筹划策略研究
  • 利润表中所得税费用为负数是什么意思
  • 报税申报不了
  • ca浏览器组件如何下载?
  • 金税四期什么时候结束
  • 年终奖怎么缴纳个税
  • 税控盘抵税可以跨年吗
  • 银行承兑汇票到期后多长时间失效
  • 增值税逾期申报流程
  • 金蝶k3迷你版年度结账
  • 长期借款利息如何做账
  • 收到客户预付的货款的会计分录
  • PHP:Memcached::cas()的用法_Memcached类
  • 收到服务费发票怎么做账务处理
  • 在途物资退货会退款吗
  • PHP:oci_field_name()的用法_Oracle函数
  • 存货的核算方法
  • 进出口公司出口退税额
  • 扣除年度未扣除怎么计算
  • 委托加工的加工费是含税的吗
  • 已缴增值税的账务处理
  • 哪些房地产项目是国企
  • yarn的配置
  • 安卓跑ubuntu
  • api接口是干嘛的
  • thinkphp框架介绍
  • 富文本编辑器和markdown编辑器的区别
  • php判断useragent
  • 企业持有待售的固定资产,应当对其预计
  • 知识图谱实现方案
  • python进行数学建模
  • openprop教程
  • php headers
  • 企业内部研究开发项目开发阶段的支出
  • 报税财务报表怎么申报
  • 预付工程款如何结算
  • python输出inf
  • 视同销售的增值税怎么申报
  • 呆账冲销是什么意思
  • access参数查询怎么弄
  • 车保险名称
  • 无形资产摊销会计凭证
  • 收取子公司管理费用
  • 帮员工购买意外险怎么记到分录
  • 简易计税办法的有
  • 用银行存款支付本季度短期借款利息
  • 个人技术转让费税率是多少
  • 会计中为什么要用黑色笔写
  • 公司员工报销车费还需要签协议吗
  • 小微企业增值税起征点是多少
  • 预提费用如何预提
  • 处置固定资产应通过什么账户核算
  • 利润为负还要交增值税吗
  • mysql复杂数据查询方法
  • win10上如何安装hd4850驱动
  • windows xp操作
  • win7资源管理器频繁崩溃
  • linux的newgrp
  • Win10专业版21h2
  • mvp功能
  • coco触控
  • 用unity做2d游戏
  • 微信小程序模板框架
  • 浏览器复制插件在哪
  • javascript io
  • shell bash sh
  • javascript中的getElementById
  • ExpandableListView 实现分组购物车
  • js日期格式转换
  • 停车场收费需要什么手续
  • 服务费交哪个税目的印花税
  • 江苏省国税客服电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设