关于js中 document.body.scrollTop 不能返回正确值的原因

最新推荐文章于 2021-04-08 14:06:18 发布
最新推荐文章于 2021-04-08 14:06:18 发布
阅读量5.5k 收藏
点赞数
分类专栏： javasrcipt 文章标签： html 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/netingcn/article/details/2585450
版权

本来是为了通过document.body.scrollTop来获取浏览器垂直滚动条向下滚动的像素，但是不管滚动条在什么位置总是返回是0，造成这样的原因和html的头部声明有关，如果头部声明 为：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，这样肯定得到的结果是 0，如果该为<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">就能得到正确的结果，对于第一种头部声明想要得滚动条的滚动的高度怎么办，解决方法有两种

1、var scrollPos; if (typeof window.pageYOffset != 'undefined') {    scrollPos = window.pageYOffset; } else if (typeof document.compatMode != 'undefined' &&      document.compatMode != 'BackCompat') {    scrollPos = document.documentElement.scrollTop; } else if (typeof document.body != 'undefined') {    scrollPos = document.body.scrollTop; }

2、用document.documentElement.scrollTop 替代 document.body.scrollTop

netingcn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Document.body.scrollTop的值总为零的快速解决办法
01-19
var sTop = document.body.scrollTop; if(sTop>100){ document.getElementById(sm_top).style.display=block; }else{ document.getElementById(sm_top).style.display=none; } 但是发现document.body.scrollTop...
document.body属性.document.body.scrollTop
04-18
综上所述，`document.body.scrollTop` 是JavaScript中处理页面滚动的一个重要工具，它可以帮助开发者实现各种与页面滚动相关的功能，提高用户体验。在实际项目中，熟练掌握并运用这一属性可以让你的网页动态效果更加...
vue中scrollTop取值无效问题
小D科技的博客
09-28 8989
最近在写Vue中的微信公众号程序遇到个问题，div获取scrollTop始终是0 网上查询了下，大家发的都是兼容性的问题的处理......，关于DTD兼容的，这里我都试过，发现并没有用，到底问题是出现在哪里呢？后面发现dom元素选错了 ，，我有个goodList组件  在index页面的index-content盒子中渲染，先前我一直取用goodList组件的scrollTop，所以一直是零。后...
document.body.scrollTop无效的解决方法
dearbaba_11的博客
04-08 238
document.body.scrollTop无效的解决方法
关于Chrome（谷歌浏览器）对document.documentElement.scrollTop识别误差
weixin_34409703的博客
08-15 250
这篇文章我在我其他博客发布过，记得遇到这个问题的时候是10年初吧，给相关技术还是重贴出来，以供大家分享！ 最近做一个瞬间信息显示浮动层时，IE、Firefox下都能显示正常，但Chrome下出现了浮动层永远显示在上面，经过仔细分析，发现Chrome对document.documentElement.scrollTop的识别会出现误差。不过加上document.body.s...
document.body.scrollTop 各浏览器兼容性解决
YXZW0723的博客
06-06 231
　　document.compatMode:获取当前浏览器采用的渲染方式。主要是浏览器的模式，有两个：BackCompat，CSS1Compat。其中前者是怪异模式，后者是标准模式。 　　　　IE默认是BackCompat模式，Gecko内核的浏览器只在table中图片层上不同，可以认为CSS1Compat标准模式document.compatMode等于BackCompat时，浏览...
document.body.scrollTop 值总为 0 的解决方法
站住借个吻的专栏
03-18 1375
页面具有 DTD（或者说指定了 DOCTYPE）时，使用 document.documentElement。页面不具有 DTD（或者说没有指定了 DOCTYPE）时，使用 document.body。在 IE 和 Firefox 中均是如此。为了兼容（不管有没有 DTD），可以使用如下代码： var scrollTop = window.pageYOffset
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
09-05
因此，当你尝试通过`document.body.scrollTop`获取滚动值时，如果页面有DTD，返回的值始终为0，导致无法正确处理基于滚动位置的布局或效果。 解决这个问题的方法是使用`document.documentElement.scrollTop`。下面...
document.documentElement && document.documentElement.scrollTop
10-30
在JavaScript中，`document.documentElement` 和 `document.documentElement.scrollTop` 是两个非常重要的属性，它们与网页文档的DOM（Document Object Model）交互，特别是涉及到页面滚动时的行为。本文将深入讲解...
document.documentElement.scrollTop指定位置失效解决办法
weixin_30949361的博客
08-29 3343
近期在vue的H5项目中，做指定位置定位的时候发现使用document.documentElement.scrollTop一直不生效。 解决办法是document.documentElement.scrollTop改成document.body.scrollTop； 如果是PC端项目，则使用document.documentElement.scrollTop。 转载于:http...
scrollTop如何获取
哼哼哈嘿的博客
10-14 1588
1、各浏览器下 scrollTop的差异 IE6/7/8： 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ； 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop； Safari: safari 比较特别，有自己获取scrollTop的函数 ： window.pageYOffset ； Firefox: 火狐等等相对标准些的浏览器就省心多了，直接用 document.do
JavaScript学习笔记之 document.body.scrollTop用法
热门推荐
jiabin_xu的博客
06-01 3万+
网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWid...
document.body.scrollTop 值总为0的解决方法（转载）
weixin_30797199的博客
11-30 144
轉 做页面的时候可能会用到位置固定的层，读取 document.body.scrollTop 来设置层的位置，像这样： window.onscroll = function () { var oFix = document.getElementById("divfix"); oFix.style.top = document.body.scrollTop + "px"; } 可是怎么...
jquery scrollTop定位问题
u010397366的博客
06-13 7929
今天遇到一个时间弹出框，其高度为固定高度，容器内有时间列表，如下图：       由于时间较多，所以我希望做一个动画效果，方便用户的选择，就是当用户已选择过时间，或者说初始化的时候这个预约时间值就存在，那么我希望这个弹出框内容部分会自动的定位到已选择项。我用的动画效果是直接用的jquery的animate方法,定位用的是scrollTop,代码如下：$('.time-list-wrap').ani...
document.documentElement.scrollTop获取不到top值
yanhailun的博客
10-17 1265
获取页面纵向滚动位置的时候使用了document.documentElement.scrollTop，在电脑上是可以获取到的，但是到手机上就获取不到这个值了，所以我们需要处理一下兼容性： const top = document.documentElement.scrollTop || window.pageYOfset || document.body.scrollTop ...
关于谷歌不能识别document.documentElement.scrollTop的解决方法
weixin_34238642的博客
07-06 915
2019独角兽企业重金招聘Python工程师标准>>> ...
document.body.scrollTop总是0的原因
Bug 无处不在！
02-09 1万+
最近写了一个拖动层的HTML页面,   需要获取滚动条当前的位置.于是我使用document.body.scrolltop获取y方向滚动的位置...奇怪的事情出现了! 无论滚动条怎么滚动, document.body.scrolltop竟然一直都是0!对比以前写的一个页面.发现区别很小. 旧页面却没有问题.这就怪了...我开始一点一点的排除,去掉多于的代码. 直到我去掉文档最顶部的
vue项目 设置scrollTop不起作用 总结
weixin_34380948的博客
06-05 3750
今天在开发中，遇到这样一个情景。一个页面中有三个模块，每个模块对应一个标题，每个模块内容都很长，所以需要点击当前模块对应的标题滚动到模块所在位置。 我想的方案是获取到每个模块距离文档顶部的距离，然后将值赋给对应要滚动的元素。 步骤如下: 首先给每个模块一个id，例如： &lt;div class="module module1" id="anchor-0"&gt; &lt;div class=...
js scrollTop兼容性问题--document.body.scrollTop与document.documentElement.scrollTop
renxing518的博客
07-19 2482
1、各浏览器下 scrollTop的差异 IE6/7/8： 对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 ； 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop  ； Safari: safari 比较特别，有自己获取scrollTop的函数 ： w
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0如何向上取整
最新发布
05-28
我们可以使用JavaScript中的Math.ceil()函数来向上取整scrollTop的值。代码如下： ``` var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; scrollTop = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值