document.body.scrollTop为0的解决方案

Jquery用多了,对单纯JS却发现有些问题。今天做浮动就碰上了document.body.scrollTop总为0的问题。百度一下终于得到解决方法。

在页面中加一个随着页面滚动条滚动的小图片广告,但是却发现document.body.scrollTop这个属性在本地的时候能取到值,但是传到服务器上的时候取到的值一直不变。

解决方案
1、原来在HTML文件头部声明了这样一句:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 原来在此DTD下面的document.body是针对整个网页真正的body了,而document.documentElement才是真正的浏览器显示区域。

改成这样就好了:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

但是W3c的标准的引用,样式会发生变化。

2、将document.body.scrollTop改为document.documentElement.scrollTop
 

类推:document.body.clientHeight也改成document.documentElement.clientHeight

帖下我的简单右下角图片浮动js代码(兼容IE7,火狐,其他未测试):

document.writeln("<div id=/"ad_DIV/" style=/"z-index:99999; left:0px;   width:200px;  position:absolute; top:20px; height:116px; /">");
document.writeln("<a href=/"http://www.blog-design.cn/"><img src=/"ad.png/" border=/"0/" width=/"200/" height=/"116/"><//a><//div>");
document.getElementById("ad_DIV").style.top=(document.documentElement.clientHeight-116)+"px" ;
document.getElementById("ad_DIV").style.left=(document.documentElement.clientWidth-200)+"px";
moveR();
function moveR() {
 document.getElementById("ad_DIV").style.top=(document.documentElement.clientHeight+document.documentElement.scrollTop-116)+"px";
 document.getElementById("ad_DIV").style.left=(document.documentElement.clientWidth+document.documentElement.scrollLeft-200)+"px";
 setTimeout("moveR();",80)

当设置`.scrollTop = 0`不生效时,可能有几个原因。首先,可能是因为给没有`scrollTop`属性的元素设置了该值。你可以通过`document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset`来获取正确的`scrollTop`值。其次,可能是因为浏览器的兼容性问题。不同浏览器对`scrollTop`属性的实现方式有所不同,导致设置不生效。另外,如果在获取元素的时候没有高度,即在数据请求后元素没有被撑开一定高度,那么设置`scrollTop`也不会生效。你可以在数据请求后,元素被撑开一定高度后再去重新获取元素并设置`scrollTop`。如果你是在Vue中使用,可以使用`$nextTick`方法来确保在DOM更新后再设置`scrollTop`的值。希望这些解释对你有帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [为什么scrollTop设置后一直为0的解释和解决方案(精品)](https://blog.csdn.net/kouryoushine/article/details/99745904)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [scrollTop不生效的原因解决方法](https://blog.csdn.net/u010463466/article/details/123044187)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值