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

最新推荐文章于 2024-06-05 11:15:38 发布

蚩尤后裔-汪茂雄

最新推荐文章于 2024-06-05 11:15:38 发布

阅读量5.9k

点赞数 3

分类专栏： JavaScript JQuery

本文链接：https://blog.csdn.net/wangmx1993328/article/details/84560051

版权

JavaScript 同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

JQuery

6 篇文章 1 订阅

订阅专栏

示例图说明

如上图所示，假设橙色表示滚动条，蓝色框表示 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 方式

编码示例

回到顶/底部

实现代码如下：

<!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>
    <!-- JQuery CDN-->
    <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>

消息区自动滚动到底部

实现代码如下：

<!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: 300px;
            height: 100px;
            background-color: #444444;
            overflow: auto;
            color: white;
        }

        h1 {
            margin-top: 80px;
        }
    </style>
    <!-- JQuery CDN-->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

    <script type="text/javascript">

        $(function () {
            /**
             * 发送消息时，滚动条自动移动在底部
             */
            $("#send").click(function () {
                let message = $("textarea").val();
                $("#inner").append("<span>" + message + "</span><br>");

                /**
                 * scrollHeight：div 内文档总高度（包括被隐藏的），当没有出现滚动条时，scrollHeight = height
                 * height：div 元素的高度，只与自己 height 属性有关，与滚动条无关
                 */
                let scrollHeight = $("#inner")[0].scrollHeight;
                let height = $("#inner").height();
                /**
                 * 滚动条距离元素顶部的高度 + div 元素的高度 = 文档的高度
                 * 这样滚动条刚好在底部
                 */
                $("#inner").scrollTop(scrollHeight - height);
            });
        });

    </script>
</head>
<body>
<div class="test" id="inner">
</div>
<div class="test">
    <textarea style="width: 100%;height: 100%;background-color: white"></textarea>
</div>

<button id="send">发送</button>
</body>
</html>

蚩尤后裔-汪茂雄

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Div 高度、滚动条距 Div 顶部偏移量、Div 中文档总高度

目录示例图说明编码示例回到顶/底部消息区自动滚动到底部示例图说明如上图所示，假设橙色表示滚动条，蓝色框表示 div 区域，黑色区域表示看不到的文档部分，高度说明如下：B：表示 div 元素高度，div 的高度不会随着内容的编号而编号，与有没有出现滚动条无关，只与自己的 height 属性有关A：表示 div 内文档高度，当没有出现滚动条时，A文档高度...
复制链接

扫一扫