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

最新推荐文章于 2023-05-16 16:39:40 发布

原创最新推荐文章于 2023-05-16 16:39:40 发布 · 5.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #浏览器

javasrcipt 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了不同doctype声明对获取浏览器滚动条位置的影响，提供了两种有效的方法来解决doctype声明为HTML4.01 Transitional时document.body.scrollTop始终返回0的问题。

本来是为了通过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