位置: 编程技术 - 正文

解决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)

  • 退的个税手续费怎么做会计分录
  • 在电子税务局可以抄税吗
  • 办税员的工作职责
  • 企业关于发票的管理及要求
  • 未开票收入下月开票怎么报税
  • 金税系统怎么录入专票
  • 实收资本实缴需要什么手续
  • 行政事业单位会计制度
  • 当年实现的利润弥补亏损会计分录
  • 上市公司现金分红对股价的影响
  • 2020年购进农产品的扣除率
  • 房产增值税是怎么交的呢
  • 金税盘可以异地使用吗
  • 专票金额怎么计算
  • 装修费税率是多少2021
  • 物业公司小规模纳税人如何报税
  • 房地产开发企业资质等级有几个
  • 私募投资基金投资者风险问卷调查
  • 装修费算固定资产吗?
  • 股权转让未分配利润如何做账
  • 跟银行借款按月还款
  • 原材料账户期末贷方余额反映
  • 贷款利息可以抵扣吗
  • 个体户经营所得核定税率
  • 苹果电脑的删除
  • 2020年计提印花税怎么做账
  • 腾讯电脑管家的信任区在哪里
  • 华硕主板bios更新后开不了机
  • 捐赠视同销售为什么不确认收入?
  • php递归算法经典实例
  • 餐饮发票可以计入什么费用
  • windows 平台
  • phpstudy安装配置
  • 房屋出租房产税如何计算
  • 承兑汇票和现汇
  • php解析配置文件
  • php实现递归
  • 其他应付款清账
  • rcnn系列详解
  • 账面价值账面余额摊余成本
  • 固定资产出租收入属于
  • 帝国cms如何调用网络
  • mongodb启动命令 linux
  • 为公司垫付费用多久报销
  • 脚手架租赁费用超过购买价格
  • 年末财务报表是什么
  • 京东开专用发票需要用公户付款吗?
  • 股东不任职,是否可以参与企业经营
  • 营业利润是负数什么原因
  • 小规模纳税人购买原材料会计分录
  • 一般纳税人认定标准2023年
  • 小规模纳税人上限
  • 固定资产计提完折旧残值怎么处理
  • 代持的股份
  • 微信支付属不属于电子商务
  • 住宿费电子发票
  • 企业有外币账户怎样做账
  • 事业单位会计制度
  • 工业会计科目有哪些
  • 长期无法收回的应收账款如何处理
  • mysql数据库操作题
  • ubuntu虚拟机apt安装tools
  • PHP startup: Unable to load dynamic library错误的错误
  • win10录音机不能用
  • 如何解决windows无法访问指定设备
  • win7怎样关闭ie浏览器
  • fedora 图形界面
  • python多核并行处理
  • cocos2d-x教程
  • 原生js实现promise
  • android studio快捷键补全
  • jQuery dataTables与jQuery UI 对话框dialog的使用教程
  • js和jquery混合使用
  • jQuery ajax提交Form表单实例(附demo源码)
  • android app安全
  • 十万元版增值税税率13发票最高开多少
  • 增值税运输费用税额计算
  • 行政服务事项包含哪些
  • 消防行政执法风险评估
  • 电脑上装什么软件开税票
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设