JavaScript中document.body.scrollTop的值总为零

发表于 | 分类于 ，

最近在学习移动web开发相关内容，在手机京东项目实战的时候，会进行样式设计：当屏幕向上滑动时，搜索框的透明度会发生变化，该变化至滑动范围超出轮播图区域时截止，透明度由0至1。其计算方法为轮播图的高度除以轮播图滚出屏幕的高度。

但使用如下代码获取，轮播图滚出屏幕的高度时，获取的值一直为0。

1
2
3
4
5
var search = document.querySelector(".jd_search")
    window.onscroll = function() {
        var offsetTop = document.body.scrollTop;
        console.log(offsetTop);
    }

经查找发现是DTD的问题。

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

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

Chrome和Firefox都是如此。

而我的页面加了<!DOCTYPE html>，所以如下即可:

1
2
3
4
5
window.onscroll = function() {
        var offsetTop = document.documentElement.scrollTop;
        /*此处不能用document.body.scrollTop 因为 DTD问题，值总为0*/
        console.log(offsetTop);
		}