document body scrollTop的值总为零的解决办法

最新推荐文章于 2023-06-06 15:38:56 发布
最新推荐文章于 2023-06-06 15:38:56 发布
阅读量4.7k 收藏
点赞数
分类专栏： web 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gang456789/article/details/78119097
版权

有一个功能需要判断返回顶部按钮是否显示。

JS代码如下：

 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一直是0。

查资料发现是DTD的问题。

页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。

页面没有DTD，即没指定DOCTYPE时，使用document.body。

IE和Firefox都是如此。

而我的页面加了，所以如下即可。

/*判断回到顶部按钮显示与否*/
     window.onscroll=function(){
        var sTop = document.documentElement.scrollTop;
    if(sTop>100){
        document.getElementById("sm_top").style.display="block";
    }else{
        document.getElementById("sm_top").style.display="none";
    }
    }

为什么会出现上面的错误，下面代码会导致这样的问题

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

页面此时才正常.

原来是这行东西造成IE无法获取document.body.scrolltop!

把顶部这两行删掉将可以了.但是为什么会这样呢?

google一下,发现改成:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

就可以了,但页面稍有变化，感觉不爽，于是又在google里找，终于解决

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; 
} 
alert(scrollPos);

document.body.scrollTop
要改成
document.documentElement.scrollTop

上面的方法虽然能解决问题，但是有时候当我们再次进入是document.documentElement.scrollTop不管用了但是document.body.scrollTop 又管用了，怎么办，最好两个都写
如下：

var roll = document.body.scrollTop || document.documentElement.scrollTop

这是问题就完美解决了

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/5238654.html有问题欢迎与我讨论，共同进步。

gang456789
关注
专栏目录
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
12-10
所以，当你在标准模式下使用 `document.body.scrollTop` 时，得到的值可能是 0，导致预期的效果无法实现。 为了解决这个问题，确保在不同浏览器和模式下的兼容性，可以采用以下的兼容性写法： ```javascript var ...
Document.body.scrollTop的值总为零的快速解决办法
01-19
有一个功能需要判断返回顶部按钮是否显示。 JS代码如下： var sTop = document.body....但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD，即指定了DOCTYPE时，使用document.docu
解决VUE中document.body.scrollTop为0的问题
10-18
今天小编就为大家分享一篇解决VUE中document.body.scrollTop为0的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决VUE中document.body.scrollTop为0
柠檬说葡萄你好酸
01-13 1万+
Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。 页面没有DTD，即没指定DO
vue js document.documentElement.scrollTop获取一直为0的解决方法
daishaochen的博客
09-15 6161
vue js document.documentElement.scrollTop获取一直为0的解决方法，vue封装组件后，常常是在组件里面继续轮滑，而document.documentElement.scrollTop拿到的是最外层浏览器的轮滑高度，所有一直是0。
document.documentElement.scrollTop总是0
weixin_34023863的博客
02-27 131
为什么都document.documentElement.scrollTop总是0呢。因为少个w3c的声明啊。 加上如下就好了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt...
为什么scrollTop设置后一直为0的解释和解决方案（精品）
热门推荐
kouryoushine的博客
08-19 4万+
背景 做前端希望页面能跳转到 某一位置用到了scrollTop属性。可是发现给某个div设置该属性后，一致为0。找了很多方案，但不都适合自己，或者说不知道是否适合。 Why scrollTop==0? 总而言之，所有情况都是因为你给一个没有滚动条的元素设置滚动条的位置。 什么时候存在滚动条？ 页面布局我们可以简单理解为 div盒子套div盒子。当内侧div盒子的高度大于外部时，外部的div就会出现...
document.documentElement.scrollTop为零
minpad的博客
04-18 1419
var search = function () { /*1.默认固定顶部透明背景*/ var searchBox = document.querySelector('.headBox'); var banner = document.querySelector('.banner'); var height = banner.offsetHeight; co...
JS 谷歌关于document.documentElement.scrollTop 值为0
分享我的点点滴滴，在成长路上与你同行！
12-25 7033
谷歌浏览器不支持document.documentElement.scrollTop，值0的问题  　　信息显示浮动层时，IE、Firefox下都能显示正常，但Chrome下出现了浮动层永远显示在上面，经过仔细分析，发现Chrome对document.documentElement.scrollTop的识别会出现误差。不过加上document.body.scrollTop后，则显示正常。  　　由...
document.body.scrollTop的值为零问题
lj1530562965的博客
10-22 378
document.body.scrollTop的值为零问题 问题背景：在做监听滚动到底部事件时，发现document.body.scrollTop的值一直为零 网上查资料发现是各个浏览器下对是否有声明的scrollTop有差异 IE： 对于没有声明的页面，使用 document.body.scrollTop 或 document.documentElement.scrollTop； 对于有声明的页面，则使用 document.documentElement.scrollTop； Chrome、Firefo
document.body.scrollTop为0的解决方案
Jruott的专栏
06-10 1219
Jquery用多了，对单纯JS却发现有些问题。今天做浮动就碰上了document.body.scrollTop总为0的问题。百度一下终于得到解决方法。 在页面中加一个随着页面滚动条滚动的小图片广告，但是却发现document.body.scrollTop这个属性在本地的时候能取到值，但是传到服务器上的时候取到的值一直不变。 解决方案 1、原来在HTML文件头部声明了这样一句： http:/
js 获取滚动条位置 scrollTop总是0
weixin_43964271的博客
06-06 2399
由于页面导航栏是在页面中而非顶部固定的，所以需要在页面滚动到遮挡住导航栏的时候，在固定位置显示导航栏，我看网上案例类似的有页面向下滚动到一定位置的时候显示一键置顶的按钮等，都是类似的需求。改为①e.target.scrollTop获取div滚动位置；②addEventListener第三个参数设置成true，事件捕获，就可以实时获取div的滚动位置了。结果一直输出的是0，而且并不是一直监听，只输出几次；定义有滚动条的dev区域是box。
document.body.scrollTop和document.documentElement.scrollTop在不同浏览器下的问题
xhmz的专栏
08-06 864
先遇到document.body.scrollTop值为0的问题  　　做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样,      window.onscroll=function () {          var oId=document.getElementByIdx_x("id");          oId.sty
document.body.scrollTop无效的解决方法
dearbaba_11的博客
04-08 248
document.body.scrollTop无效的解决方法
解决document.body.scrollTop总是零的问题
FreeSweet的专栏
08-01 1310
原来在HTML文件头部声明了这样一句：http://www.w3.org/TR/html4/loose.dtd">改成这样就好了：但页面稍有变化，一些样式会不起作用了。在google中找到了以下解决办法var scrollPos; if (typeof window.pageYOffset != undefined) {    scrollPos = window.pageYO
document.body.scrollTop为0 怎么解决
最新发布
06-09
如果您的 `document.body.scrollTop` 始终为0，有可能是因为您的body元素没有设置高度，或者您的body元素中没有内容导致无法滚动。您可以尝试在body元素中添加一些元素或者设置一个高度来测试是否可以正常滚动。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值