Div 高度、滚动条距 Div 顶部偏移量、Div 中文档总高度

﹏ヽ暗。殇╰゛Y 2022-04-13 03:48 278阅读 0赞

**目录**

示例图说明

编码示例

回到顶/底部

消息区自动滚动到底部

--------------------

# 示例图说明 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

如上图所示，假设橙色表示滚动条，蓝色框表示 div 区域，黑色区域表示看不到的文档部分，高度说明如下：

> B：表示 div 元素高度，div 的高度不会随着内容的编号而编号，与有没有出现滚动条无关，只与自己的 height 属性有关
> 
> A：表示 div 内文档高度，当没有出现滚动条时，A文档高度等于 div 高度（A = B）；随着内容的增加出现滚动条时，A 的值会增加
> 
> C：滚动条相对 div 元素顶部（top）边缘的距离，与上面隐藏的文档无关。
> 
> A >= B + C；// 图1 中 C = 0; 图2 中 A > B + C ；图3 中 A = B + C;

div 文档总高度（A）获取方式如下：

> var scrollHeight = document.getElementById("\#div1").scrollHeight; //scrollHeight 必须 DOM 操作,JQuery 没有对应方法
> 
> var scrollHeight = $("\#div1")\[0\].scrollHeight //可以使用 JQuery 先选择元素，然后 \[0\] 转为 DOM 对象

div 元素高度（B）获取方式如下：

> var height=$("\#dvi1").height() // JQuery 操作方式

div 滚动条相对 div 元素顶部（top）边缘的高度：

> var scrollTop = $("\#div1").scrollTop();  // JQuery 获取方式
> 
> var scrollTop = document.getElementById("div1").scrollTop; // DOM 方式

# 编码示例 #

## 回到顶/底部 ##

![20181127101020505.gif][]

实现代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>Div 距离汇总</title>
        <style type="text/css">
            .test {
                width: 500px;
                height: 300px;
                background-color: #444444;
                overflow: auto;
                color: white;
            }
    
            h1 {
                margin-top: 80px;
            }
        </style>
        
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    
        <script type="text/javascript">
    
            $(function () {
                /**
                 * 回到顶部
                 */
                $("#top").click(function () {
                    $(".test").scrollTop(0);
    
                    /**
                     * scrollTop：div 滚动条距离 div 上边缘的距离
                     * scrollHeight：div 内文档总高度（包括被隐藏的），当没有出现滚动条时，scrollHeight = height
                     * height：div 元素的高度，只与自己 height 属性有关，与滚动条无关
                     */
                    let scrollTop = $("#inner").scrollTop();
                    let scrollHeight = $("#inner")[0].scrollHeight;
                    let height = $("#inner").height();
                    console.log("height=" + height, "scrollTop=" + scrollTop, "scrollHeight=" + scrollHeight);
    
                });
    
                /**
                 * 调到底部
                 */
                $("#bottom").click(function () {
                    let scrollHeight = document.getElementById("inner").scrollHeight;
                    $(".test").scrollTop(scrollHeight);
    
                    let scrollTop = document.getElementById("inner").scrollTop;
                    let height = $("#inner").height();
                    scrollHeight = document.getElementById("inner").scrollHeight;
    
                    console.log("height=" + height, "scrollTop=" + scrollTop, "scrollHeight=" + scrollHeight);
                });
    
                /**
                 * 运动到中间
                 */
                $("#center").click(function () {
                    let scrollHeight = document.getElementById("inner").scrollHeight;
                    let middle = scrollHeight / 2;
                    $(".test").scrollTop(middle);
    
                    let scrollTop = $("#inner").scrollTop();
                    let height = $("#inner").height();
                    scrollHeight = document.getElementById("inner").scrollHeight;
                    console.log("height=" + height, "scrollTop=" + scrollTop, "scrollHeight=" + scrollHeight, "middle=" + middle);
                });
            });
    
        </script>
    </head>
    <body>
    <div class="test" id="inner">
        <h1>China 1</h1>
    
        <h1>USA 1</h1>
    
        <h1>UK 1</h1>
    
        <h1>China 2</h1>
    
        <h1>USA 2</h1>
    
        <h1>UK 2</h1>
    
        <h1>China 3</h1>
    
        <h1>USA 3</h1>
    
        <h1>UK 3</h1>
    </div>
    <button id="top">回到顶部</button>
    <button id="bottom">跳到底部</button>
    <button id="center">运动中间</button>
    </body>
    </html>

## 消息区自动滚动到底部 ##

![20181127102430734.gif][]

实现代码如下：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220413/dfef700f6aff4ce18d97e718fba8b720.png
[20181127101020505.gif]: /images/20220413/da97c458ef5c46bf9c0c2f840d68be4e.png
[20181127102430734.gif]: /images/20220413/735bd2c17c5d4e8e8caf129b2cfee0cb.png