位置: 编程技术 - 正文

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

  • 建筑企业成本核算工作流程
  • 专门借款资本化时点
  • 汇算清缴忘记申报了怎么办
  • 运输发票抵扣进项税率
  • 支付招聘费收到专票怎么记账
  • 有两种税率的如何填申报表
  • 进项与销项不符怎么办
  • 运输费可以和货款合并开票吗
  • 收就业局稳岗补贴做账
  • 单位体检如何入账
  • 劳务公司计提工资怎么算
  • 去年成立的公司今年需要年检吗
  • 逃避缴纳税款罪移送公安标准
  • 代开专票作废需要什么资料?
  • 机打发票领回怎么录入
  • 增值税普通发票和普通发票的区别怎么交税
  • 在建工程的工资计入哪里
  • 收境外的钱
  • 现金日记账有哪几种
  • 客户汇公司账户怎么汇
  • 过期商品报损账务处理?
  • 物业预收的物业费怎么做会计分录?
  • printnow.exe - printnow是什么进程 有什么作用
  • 华为手机屏幕有个圆点怎么取消
  • 净资产利润比率计算公式
  • 专用发票的设计流程
  • 实收资本账户的核算内容是什么
  • 国有土地使用权租赁
  • 增值税进项税转出什么意思
  • flash是什么文件
  • 结构性存款利息增值税
  • 外币交易犯法吗
  • 偷税漏税的会计要负什么责任
  • 未履行的应税合同缴纳印花税
  • 【torch.nn.Parameter 】参数相关的介绍和使用
  • 数据库管理框架
  • 其它收益和递延收益
  • linux执行php脚本
  • 利润表所得税费用怎么算
  • 业务经费包括哪些内容
  • 员工出差过程中意外死亡算工伤吗
  • 企业境外收入境内申报
  • 业务预算包括直销费用吗
  • inner join用法示例
  • 先息后本贷款利息计算器
  • sql server功能选择
  • sql表添加字段
  • 企业之间交换房地产要交土地增值税吗
  • 在租赁公司贷款买的车绿本上会有我的名字吗
  • 劳务费个税账务处理办法
  • 差额发票如何做账
  • 提取盈余公积的会计科目
  • 账外资产处理
  • 税后扣款怎么做账
  • 免征的增值税账务处理
  • 培训费属于什么应税项目
  • 银行承兑汇票提示付款期限
  • 装修公司开劳务费怎么选择税控编码
  • 发票过账是什么意思
  • mysql序列函数
  • mysql5.6允许远程连接
  • 电脑删除ie后怎么恢复
  • win8 怎么样
  • 让windows10蓝屏
  • ubuntu下软件
  • centos搭建v2
  • win10用户账户guest
  • 红石cpu教程
  • 汤姆猫arcode
  • perl怎么读取文件
  • ftp自动上传脚本怎么用
  • 文本左右对齐排版怎么弄
  • nodejs实战教程
  • 菜鸟 javascript
  • mac安装nodejs的权限问题
  • python动态网页开发教程
  • 死循环代码
  • 宜兴税务局长郁岚
  • 年终奖发4万扣多少税
  • 国税新规
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设