位置: 编程技术 - 正文

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

  • 电梯安装费发票
  • 结转未交增值税会计科目怎么写
  • 其他应付款包括哪些内容口诀
  • 主营业务收入体现在资产负债表哪里
  • 所得税退税怎么办
  • 测试费用
  • 出口的港杂费包括哪些
  • 出售投资性房地产时,按其账面价值结转到主营业务成本
  • 2019年工会经费新规定
  • 电子税务局财务负责人实名认证
  • 研发加计扣除减免税
  • 公司亏损多久可以申请解散
  • 固定资产发票怎么入账
  • 银行收回客户误扣的费用怎么处理?
  • 企业的季度所得税怎么算
  • 研发支出费用化支出包括哪些
  • 企业清算时未抵扣的进项税账务处理
  • 固定资产清理不能有余额
  • 往来核算会计的岗位职责和工作内容
  • 建筑工程项目的全生命周期包括
  • 个人独资所得税税率表最新
  • 2021印花税零申报怎么报
  • 白蚁防治费计入什么科目
  • 航空公司按照一次性收费
  • 营增改后,建筑施工企业有哪些改变?
  • 工会经费计税依据是上年工资还是当年工资
  • 预付账款和其他应收款可以抵消吗
  • 全额计提坏账的款项收回
  • 印花税的购销合同改成买卖合同了吗?
  • 公司年检需要什么资料
  • ppt另存为在哪儿
  • win10系统如何在游戏中禁用输入法
  • 优先股的发行主体
  • 华为鸿蒙harmonyos刷机
  • php socket select
  • 闲置私家车出租APP
  • 长期应付款的摊余成本怎么计算
  • web转义字符
  • php socket_create
  • 交易性金融资产的入账价值
  • idea如何运行springboot项目
  • 劳务报酬可以扣除合理支出吗
  • 公司注销前的资料怎么办
  • 进口货物完税价格怎么算
  • 补交之前年度税款怎么调账
  • 公司向银行贷款利息是多少
  • python最小正整数
  • 大学生创新创业平台
  • 六税两费减半征收政策2023
  • 一般纳税人作废发票的流程
  • SQL Server实现split函数分割字符串功能及用法示例
  • 增值税留抵扣额
  • 等线支付给劳务派遣单位的工资怎么做账?
  • 建筑企业结转成本附件
  • 开票方未缴税,为何要追回付款方的退税款
  • 收到预收款并已付款
  • 支付国外客户佣金违法吗
  • 公司应该怎么记账
  • 利息收入和应收利息
  • 金蝶软件标准版多少
  • 银行汇票结算业务
  • 违约金进项税额可否抵扣 分录
  • 印花税怎么新增税源
  • 预提费用取消了怎么调整
  • win7清理系统垃圾的方法
  • XP系统升级WIN7系统
  • winxp系统安装教程
  • Windows Server 2008网络中禁止迅雷下载
  • ubuntu运行慢的原因
  • windows8.
  • win8系统咋样
  • javascript抢票
  • node.js批量添加数据
  • sed配合grep
  • js中写for循环
  • node.js的安装步骤
  • 按犍设置
  • 地税税务稽查管理办法
  • 进项转出怎么做
  • 税务局的纳税服务中心是干什么的
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设