scrollTop的兼容性小结

最新推荐文章于 2023-06-24 07:31:05 发布
最新推荐文章于 2023-06-24 07:31:05 发布
阅读量1.1w 收藏 2
点赞数
分类专栏： Javascript及前端开发 文章标签： javascript scroll 浏览器 html function google
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yycai/article/details/4008815
版权

在页面上加上了

<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.01   Transitional//EN"   
  "http://www.w3.org/TR/html4/loose.dtd">

之后，document.body.scrollTop的值一直为0（在IE和FF下），网上有人改为document.documentElement.scrollTop就可以了，试用了一下真的OK了。

 

但是当换到Google浏览器时，问题又出来了，document.documentElement.scrollTop值一直为0！到是document.body.scroll的值正确了。

 

网上有解决方案如下：（http://www.codebit.cn/pub/html/javascript/tip/get_scroll_position/）

 

 

首先说明，这段代码是正确的。只是当document.documentElement和document.documentElement.scrollTop都有值，但是document.documentElement.scrollTop==0时，有点误导人，呵呵。

于是我改成如下：

 

 
 
后来发现
var top = document.body.scrollTop | document.documentElement.scrollTop;
 
这样更简单，而且在我的几种浏览器下也都OK。。。。。

 

yycai
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
关于scrollLeft,scrollTop的浏览器兼容性测试
09-05
为了解决这些兼容性问题，可以编写一个封装函数，如上述代码所示，来统一获取 `scrollLeft` 和 `scrollTop` 的值。这样的封装方法考虑到了各种情况，确保无论浏览器如何处理，都能正确获取到元素的滚动位置。 例如...
JavaScript第 11 篇，JavaScript中的scrollTop（JavaScript中的scrollTop，JS滚动到顶部）
weixin_65793170的博客
03-30 1万+
⭐scrollTop是JavaScript中一个非常有用且重要的方法，它用于获取或设置元素的垂直滚动条位置，实现各种滚动相关的功能，无论是回到顶部、滚动到指定位置还是监听滚动事件，都需要用到scrollTop，在本文中，我们将深入了解scrollTop的用法和实际应用，这是一张scrollTop的关系图，仅供参考
scrollTop是什么及用法说明
a123789999的博客
08-20 1万+
scrollTop属性是什么? 有些情况下,“元素中内容”的高度会超过“元素本身”的高度, scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度。 通过一个实例演示来讲述scrollTop属性是什么 下面的演示中，外层元素的高度值是200px,内层元素的高度值是300px。很明显，“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有部分内容会隐没在“外层元素的上边界”之外，s...
scrollTop()方法
热门推荐
muxi229的博客
06-19 3万+
scrollTop设置滚动条用法 前提 工作中需要做一个点击右侧网元或板卡，左侧topo图滚动到对应位置 用到的知识点 scrollTop(),position()，工作环境中用了Jtopo,Ztree scrollTop定义与用法 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。 scroll top offset 指的是滚动条相对于其顶部的偏移。 如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。 $(selector).scrollTop(offset)
【JavaScript】scrollTop和scrollHeight
最新发布
小秀的博客
06-24 2821
scrollTop和scrollHeight
javascript滚动到顶部scrollTop用法
weixin_50367873的博客
04-14 2万+
首先了解下列相关属性 网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高：
原生javascript兼容性测试实例
10-27
在JavaScript开发中，兼容性问题始终是一个不可忽视的挑战，特别是在处理不同的浏览器和它们的特性时。本篇文章将深入探讨如何解决原生JavaScript在不同浏览器中的兼容性问题，特别是针对IE浏览器的一些特有属性和...
javascript document.compatMode兼容性
10-29
JavaScript中的`document.compatMode`属性是用来检测浏览器当前的渲染模式，这对于处理跨浏览器的兼容性问题至关重要。在网页开发中，浏览器对HTML文档的解析方式有两种：Quirks Mode（怪异模式）和Standards Mode...
浏览器兼容性问题简介
07-22
浏览器兼容性问题分类浏览器的“模式”如何编写具有良好兼容性的网页显示问题：CSS兼容性height/width, position:fixed, …脚本问题：Java ｓｃｒｉｐｔ 兼容性DOM, Date.getYear, scrollTop, …缺陷（bug）与特性...
可能这些是你想要的H5软键盘兼容方案(小结)
12-14
在开发H5聊天应用时，软键盘的兼容性问题是一个常见的挑战。特别是在Android和iOS平台上，由于系统的不同处理方式，会导致输入框与软键盘的交互出现各种问题。本文将总结几种针对这些问题的解决策略。 首先，我们...
niceScroll滚动条出现在div的左侧（PS：原本应该出现在div右侧）
yan263364的博客
10-19 1903
一、问题在用jquery.nicescroll.js时，发现滚动条出现在div的左侧，正常情况下应该出现在右侧的。如图：![这里写图片描述](http://img.blog.csdn.net/20171019102658672?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFuMjYzMzY0/font/5a6L5L2T/fontsize/400/fi
scrollTop以及页面回到顶部
freedms的博客
10-24 2704
1.实现有许多种方法，原理是监听页面高度实现滚动。1.实现有许多种方法，原理是监听页面高度实现滚动。
scrollTop、scrollLeft、scrollWidth、scrollHeight
pig_ning的博客
03-24 2770
scrollTop、scrollLeft、scrollWidth、scrollHeight
深度理解Jquery 中 scrollTop() 方法
weixin_34239592的博客
09-05 817
这是工作遇到scrollTop() 方法。为了强化自己，把它记录在博客园当中。 下面就开始scrollTop 用法讲解： scrollTop() 定义和用法 scrollTop() 方法设置或返回被选元素的【垂直滚动条位置】。 Note： 当滚动条位置位于最顶部时，位置是0；当用于返回位置时： 该方法返回 第一个匹配元素的滚动条的垂直位置。当用于设置位置时： 该方法设置 所有...
jquery niceScroll（插件）滚动条错位问题和ztree插件的使用
HuLuWa1997的博客
11-10 537
1.在做项目时，由于页面风格不能使用默认的滚动条，所以找到了niceScroll这个滚动条插件 2.要使用滚动条和ztree插件，我们必须先引入插件的js文件，这里要注意的是niceScroll插件是基于jQuery的，所以我们必须在引入滚动条插件之前先引入jQuery的js文件。引入之后我们便可以使用滚动条了。 <script src="dist/js/lib/jquery/jquery-3.3.1.min.js"></script> <script src
scrollTop和scrollHeight
Hero4399的博客
02-28 3719
scollTop scrollTop 可以被设置为任何整数值，同时注意： 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个”non-scrollable”属性）， scrollTop将被设置为0。 设置scrollTop的值小于0，scrollTop 被设为0 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值. 总结：元素发生溢出时可以设置scrollT...
IE兼容scrollTo、scrollTop，input输入框自带X，safari输入框自带
weixin_39137100的博客
04-19 345
ie 使用append报错，换appendChild。(window.scrollTo()是有的）dom.scrollTo IE不识别。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值