JavaScript---关于scrollTop为0以及解决方法。
说明:当没有DOCTYPE声明的时候document.body.scrollTop一切正常
当有DOCTYPE声明的时候document.body.scrollTop总是输出0;
当有DOCTYPE声明的时候document.body.scrollTop总是输出0;
我们必须改用另一个方法:
document.documentElement.scrollTop
我们刚才使用的document.documentElement.scrollTop不能用了,
它总是输出0.
这是我们又想到了 在没有声明的时候,
需要用
document.body.scrollTop
当有DOCTYPE声明的时候,
需要用document.documentElement.scrollTop方法来获取滚动条高度。
当没有声明的时候,用document.body.scrollTop方法。
所以我们需要用到if...else...去判断。
如果有DOCTYPE声明,我们该怎么办,如果没有DOCTYPE声明,我们该怎么办。
var scotop ;
if(document.body.scrollTop){
scotop =
document.body.scrollTop;
}else{
scotop =
document.documentElement.scrollTop
}
这样判断后,就可以在两种情况下同时使用了。
IE6,IE7,FF2测试通过.
FF3没装,无法测试。
这个方法是google找来的。

1
document.onclick = function(){
2
var scrollPos;
3
if (typeof
window.pageYOffset != 'undefined') {
4
scrollPos = window.pageYOffset;
5
}
6
else if (typeof
document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
7
scrollPos =
document.documentElement.scrollTop;
8
}
9
else if (typeof document.body
!=
'undefined') {
10
scrollPos =
document.body.scrollTop;
11
}
12
alert( " 滚动条高度为
:"
+
scrollPos
)
13
}
程序解释:
解释1:
document.body.scrollTop:就是滚动条顶部到网页顶部的这段距离
window.pageYOffset是NS专用属性,它的含义和IE下的document.body.scrollTop一样
。
解释2:
当文档有了标准声明时, document.compatMode 的值就等于
"CSS1compat",
当没声明的时候,
document.compatMode 的值等于 "BackCompat",所以想判断文档是否有声明,
可以这么写:
if (typeof document.compatMode !=
'undefined' && document.compatMode != 'BackCompat'){
}
解释3:
当文档没有声明的时候,可以用
document.body.scrollTop;来获取滚动条高度。
当有DOCTYPE声明的时候document.body.scrollTop总是输出0;
当有DOCTYPE声明的时候document.body.scrollTop总是输出0;
我们必须改用另一个方法:
document.documentElement.scrollTop
我们刚才使用的document.documentElement.scrollTop不能用了,
它总是输出0.
这是我们又想到了 在没有声明的时候,
需要用
document.body.scrollTop
当有DOCTYPE声明的时候,
需要用document.documentElement.scrollTop方法来获取滚动条高度。
当没有声明的时候,用document.body.scrollTop方法。
所以我们需要用到if...else...去判断。
如果有DOCTYPE声明,我们该怎么办,如果没有DOCTYPE声明,我们该怎么办。
var scotop ;
if(document.body.scrollTop){
scotop =
document.body.scrollTop;
}else{
scotop =
document.documentElement.scrollTop
}
这样判断后,就可以在两种情况下同时使用了。
IE6,IE7,FF2测试通过.
FF3没装,无法测试。
这个方法是google找来的。

1

2

3

window.pageYOffset != 'undefined') {
4

5

6

document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
7

document.documentElement.scrollTop;
8

9

!=
'undefined') {
10

document.body.scrollTop;
11

12

:"
+
scrollPos
)
13

解释1:
document.body.scrollTop:就是滚动条顶部到网页顶部的这段距离
window.pageYOffset是NS专用属性,它的含义和IE下的document.body.scrollTop一样
。
解释2:
当文档有了标准声明时, document.compatMode 的值就等于
"CSS1compat",
当没声明的时候,
document.compatMode 的值等于 "BackCompat",所以想判断文档是否有声明,
可以这么写:
if (typeof document.compatMode !=
'undefined' && document.compatMode != 'BackCompat'){
}
解释3:
当文档没有声明的时候,可以用
document.body.scrollTop;来获取滚动条高度。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!