scrollTop的兼容问题

最新推荐文章于 2023-12-06 17:15:46 发布

web_LamHo

最新推荐文章于 2023-12-06 17:15:46 发布

阅读量451

点赞数

CC 4.0 BY-SA版权

分类专栏：兼容文章标签：兼容

本文链接：https://blog.csdn.net/web_LamHo/article/details/52075654

兼容专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用 JavaScript 监听页面滚动位置的方法。通过检测浏览器类型，分别针对 Chrome 和其他浏览器获取滚动条的位置，确保了跨浏览器的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

window.onscroll = function（）{
    if(window.navigator.userAgent.indexOf("Chrome") !== -1){
        scrollTop = $('body').scrollTop();
    } else{
        scrollTop = document.documentElement.scrollTop;
    }
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

web_LamHo

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JS中完美兼容各大浏览器的scrolltop方法

10-24

最近用到scrolloTop()想去获取滚动条距离顶部的距离，结果只有chrome下面可以正常的获取scrollTop，ff和ie下这个值都等于0，使得许多效果比如屏幕滚动等等均无法正常实现。究其原因是scrollTop()在各个浏览器中的兼容性问题，今天我们就来详细探讨下。

详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

11-23

总的来说，处理`scrollTop`的兼容性问题需要开发者对不同浏览器的特性和API有深入理解。使用`getBoundingClientRect()`获取元素位置，`$(document)`和`$("body,html")`组合来处理滚动值的获取和设置，以及适当地运用...

参与评论您还未登录，请先登录后发表或查看评论

【转】获取scrollTop兼容各浏览器的方法，以及body和documentElement是啥？

weixin_34049948的博客

12-25

358

1、各浏览器下 scrollTop的差异 IE6/7/8：对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度；对于有doctype声明的页面则可以使用 document.documentElement.scrollTop； Safari: safari 比较特别，有自己获取scrollTop...

scrollTop兼容性问题

leileibrother的博客

03-13

1437

很多时候需要获取页面的scrollTop的值，通常使用document.body.scrollTop来获取值。今天在review代码时，发现这个写法无法获取到scrollTop的值，查阅资料发现scrollTop的兼容性问题，在这里分享一下。我通常会在html文件的头部声明文档，也就是，如果写了这个声明，那就需要使用如下方法： var scrollTop = document.doc

scrollTop设置滚动定位的兼容问题

最新发布

知己知彼的百战不殆

12-06

579

调试后发现有个别手机使用document.body.scrollTop设置生效但会出现document.body.scrollTop值为0（number类型）的情况，此时就走else啦。，会获取到compatMode为“CSS1Compat”，但并不能保证使用document.documentElement.scrollTop 设置会生效。赋值的话，两个属性页面未滚动情况下，值都为0，两个语句都走一遍不会报错，仅一个可赋值成功另一个应该是只读，再次读取值仍然为0。现在文档多数会在html中设置成标准模式。

解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法

10-23

以上就是在解决Chrome与Firefox浏览器间关于`scrollTop`属性的兼容问题时的一些关键知识点，希望这些内容能够帮助开发者更好地理解和处理相关的问题。对于网页开发人员来说，了解不同浏览器对JavaScript属性的不同...

关于scrollLeft,scrollTop的浏览器兼容性测试

09-05

为了解决这些兼容性问题，可以编写一个封装函数，如上述代码所示，来统一获取 `scrollLeft` 和 `scrollTop` 的值。这样的封装方法考虑到了各种情况，确保无论浏览器如何处理，都能正确获取到元素的滚动位置。例如...

scorllTop兼容性问题

ZhouRX的博客

07-11

313

在实现“回到顶部”功能时，需要判断用户下拉页面的举例，来判断是否需要显示“回到顶部”的按钮。因此准备使用 document.body.scrollTop的值大小来判断。代码如下： window.onscroll = function(){ //滚动超出高度，显示按钮，否则隐藏 var backtop = document.body.scrollTop; //滚动超过三分之一的屏幕高度时，将按钮从 display:none设置成block if(backtop >= (pageloo

scrollTop兼容性

sinat_41747081的博客

10-23

707

1、各个浏览器下scrollTop的获得是不一样的: 对于IE6/7/8/9/10：对于没有doctype声明的页面里需要使用 document.body.scrollTop 来获得scrollTop高度；而对于有doctype声明的页面则需要使用 document.documentElement.scrollTop ； Safari: safari 比较特殊，需要使用： window....

scroll事件的优化以及scrollTop的兼容性

weixin_33860737的博客

05-22

299

scrollTop的兼容性 scroll事件，当用户滚动带滚动条的元素中的内容时，在该元素上面触发。<body>元素中包含所加载页面的滚动条。虽然scroll事件是在window对象上发生，但他实际表示的则是页面中相应元素的变化。在混杂模式（document.compatMode的值为BackCompat）下，可以通过<body>元素的scrollLeft和scrol...

scrollTop兼容各种浏览器

weixin_34128411的博客

10-23

236

/** *获取scrollTop的值，兼容所有浏览器 */ function getScrollTop() { var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; return scrollTop; } /** *设置scrollTop的值，兼容所有...

scrollTop()的兼容性问题

bluelotos893的博客

06-12

5727

公司的移动端项目之前使用$(&amp;amp;amp;amp;amp;quot;body&amp;amp;amp;amp;amp;quot;).scrollTop()方法在微信和QQ浏览器中都使用正常，后来到了荣耀平板上Chrome浏览器就失灵了，取值始终为0。猜想到了是由于浏览器的兼容性问题，具体就不去研究，解决问题就行： //获取窗口滚动高度 function getScrollTop(){ var scrollTop = window

利用offsetTop和scrollTop实现移动端常见的当分类栏移动到顶部时固定位置效果

csx blog

01-18

4625

利用offsetTop和scrollTop实现移动端常见的当分类栏移动到顶部时固定位置效果，代码如下： var sub_classify = document.getElementsByClassName('sub_classify')[0]; window.onscroll = function(){ var mTop = sub_classify.offsetTop;

获取scrollTop兼容各浏览器的方法

我仅仅是一个Coder

02-09

8340

window.pageYOffset 属于window对象，IE9+ 、firefox、chrome，opera均支持该方式获取页面滚动高度值，并且会忽略Doctype定义规则。 window.scrollY 属于window对象，firefox、chrome，opera支持，IE不支持，忽略Doctype规则。 document.documentElement.scrollT

Firefox与Chrome滚动兼容：JavaScript scrollTop问题解决方案

在开发过程中，尤其是在构建具有交互性的博客目录功能时，开发者可能会遇到JavaScript页面滚动效果scrollTop在Firefox与Chrome浏览器之间的兼容问题。滚动值的获取与设定是这类功能的关键，通常我们期望在所有现代...