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次点击

 

chrome下： 三次点击都是0

 

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:

 

第一种情况下的ie7:

 

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

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

 第二种情况下的ie9:

 

第二种情况下的ie7:

 

# python # java # php
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

华为云：做厚算力“黑土地”，成就行业AI先锋

avatar 华为开发者空间
cover

版本速递 | 华为云Versatile智能体平台 新增特性介绍（2025年9月发布）

avatar 华为开发者空间
cover

超节点架构创新，开源开放共筑全场景算力底座

avatar 华为开发者空间