关于scrollTop和scrollHeight那点事儿（调研）

最新推荐文章于 2024-01-15 22:28:00 发布

懿之星落45℃

最新推荐文章于 2024-01-15 22:28:00 发布

阅读量271

点赞数

分类专栏： js 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/yangdonghhm/article/details/84527674

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

关于scrollTop和scrollHeight那点事儿（调研）

1、scrollTop

（1）设置scrollTop

FF、IE8 使用document.documentElement.scrollTop = 100;

chrome 使用document.body.scrollTop = 100;

（2）取值

scrollTop = document.documentElement.scrollTop + document.body.scrollTop; //兼容

2、scrollHeight

计算方法：scrollHeight = content.height() + padding; //padding是上下边距的和

（1）取值

FF、IE8 document.documentElement.scrollHeight = body.content.height() + margin;

document.body.scrollHeight = body.content.height();

chrome document.documentElement.scrollHeight = document.body.scrollHeight = body.content.height() + margin;

关于scrollHeight的实践，出现了CSS兼容问题

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>scrollTop和scrollHeight的区别</title>
    <base target="_self" />

<style type="text/css">
    #first01{
        width:200px;height:400px;background-color:red;overflow:auto;margin:20px;padding:10px;
    }
    #words{
        height: 700px;background-color: green;
    }
</style>
</head>
<body>
    <div id="first01">
        <div id="words">

        </div>
    </div>

    <div style="width:200px;height:400px;background-color:blue;"></div>
    <script type="text/javascript">
        var temp = document.getElementById("first01");
        alert(temp.scrollTop);
        alert(temp.scrollHeight);
    </script>
</body>
</html>