js的scroll详解 - 爱码网

scrollTop : 滚动条滚动距离说明：chrome下他会以为滚动条是文档元素的，所以需要做兼容
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

我们来验证下chrome是否存在兼容的问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{height:2000px;}
    </style>
</head>
<body>
    <script>
        document.onclick = function(){
            console.log(document.documentElement.scrollTop);
        }
        
    </script>
</body>
</html>

ie7/ie9: 分别做了3次点击

js的scroll详解

chrome下：三次点击都是0

js的scroll详解

scrollHeight 返回整个元素的高度+padding（包括子元素把父元素撑开隐蔽的地方）

说明:scrollHeight问题比较大

1、当子元素的高度大于父元素高度：标准浏览器下包含子元素样式高+padding+margin+border+父元素padding-top的值，ie7以下包含子元素样式高+padding+margin+border+父元素padding-top和padding-bottom

2、当子元素的高度小于父元素高度：标准浏览器下包含父元素样式高+padding，ie7以下只计算子元素的高度+父元素的padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{height:2000px;}
        #d1{width:100px;height:100px;background:red;padding:10px;margin:10px;border:5px solid black;}
        #d1_1{width:100px;height:250px;background:blue;}
    </style>
</head>
<body>
    <div id="d1">
        <div id="d1_1"></div>
    </div>
    <script>
        document.onclick = function(){
            console.log(document.getElementById('d1').scrollHeight);
        }
        
    </script>
</body>
</html>

第一种情况下的ie9:

js的scroll详解

第一种情况下的ie7:

js的scroll详解

改一下父元素的高度，看下第二种情况：

#d1{width:100px;height:500px;background:red;padding:10px;margin:10px;border:5px solid black;}

第二种情况下的ie9:

js的scroll详解

第二种情况下的ie7:

js的scroll详解