测试页面如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
body{
height: 2000px;
}
</style>
</head>
<body>
<script>
window.onscroll=function () {
var top=document.body.scrollTop;
console.log(top);
}
</script>
</body>
</html>
Chrome 浏览器下,无论你怎么滚动页面,控制台里输出的就是 0 ;
有人说这是个兼容性问题,也对.
测试代码不变, Chrome , IE 都是 0 ,而 Edge 就能正确的输出.
按浏览器兼容来解决,方法很简单:
document.body.scrollTop 无效的时候,
换用 document.documentElement.scrollTop 就可以了.
var top=document.body.scrollTop || document.documentElement.scrollTop;//兼容写法
这个问题到这里并没有结束,
有人可能遇到这样的情况:
同样的js代码,同样的 Chrome 浏览器,为什么别人能用 document.body.scrollTop ,偏偏我就用不了???
这是个有趣的问题,我研究了一下.
发现区别在于 HTML 代码的DTD声明上:
<!DOCTYPE html>
如果不做DTD声明, Chrome就可以支持 document.body.scrollTop 了.
很怪吧?
但这里要强调一下:
虽然,HTML 5 不基于 SGML，因此不需要对 DTD 进行引用,
但是,依然需要 doctype 来规范浏览器的行为!
一个具有正确文档类型（doctype）的 HTML5 文档：
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
