document.body.scrollTop 一直为0

body的scrollTop

在更改wordpress主题时发现body的scrollTop获取到的值一直为0,且不能设置
大概的结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en" style="height:100%;width:100%;position:absolute;overflow:hidden;">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body style="height:100%;position:relative;margin:0;overflow:auto">
    <div style="height:200%;background:gray;position:relative;font-size:82px;">123
    </div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</html>

分析发现是由于html中的‘overflow:hidden’造成的;
当html有设置overflow时，body的scrollTop便无法正常获取

div的scrollTop

但是在div中使用相同的结构时，scrollTop获取正常
结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en" style="height:100%;width:100%;position:absolute;overflow:hidden;">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body style="height:100%;position:relative;margin:0;">
    <div style="height:100%;background:gray;position:relative;font-size:82px;overflow:hidden;">
        <div id="scroll" style="height:100%;background:gray;position:relative;font-size:82px;overflow:auto;">
            <div style="height:200%;background:gray;position:relative;font-size:82px">456</div>
        </div>
    </div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</html>

本文地址： http://gehaiqing.com/2016/08/14/js-scrolltop/