当前位置：首页 > article >正文

scrol家族 offset家族 client家族学习

article 2025/1/30 4:08:37

Scroll 系列属性

scrollTop & scrollLeft

scrollTop: 返回元素的内容已向上滚动的部分的高度。
scrollLeft: 返回元素的内容已向左滚动的部分的宽度。

scrollHeight & scrollWidth

scrollHeight: 返回元素的实际高度，包括由于溢出而在屏幕上不可见的内容。
scrollWidth: 返回元素的实际宽度，包括由于溢出而在屏幕上不可见的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Scroll Properties Example</title>
    <style>
        #container {
            width: 200px;
            height: 200px;
            overflow: auto;
            border: 1px solid black;
        }
        .content {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="content"></div>
    </div>
    <button onclick="logScrollProperties()">Log Scroll Properties</button>

    <script>
        function logScrollProperties() {
            const container = document.getElementById('container');
            console.log(`scrollTop: ${container.scrollTop}`);
            console.log(`scrollLeft: ${container.scrollLeft}`);
            console.log(`scrollHeight: ${container.scrollHeight}`);
            console.log(`scrollWidth: ${container.scrollWidth}`);
        }

        // 示例：自动滚动到底部
        setTimeout(() => {
            const container = document.getElementById('container');
            container.scrollTop = container.scrollHeight;
            container.scrollLeft = container.scrollWidth;
        }, 2000);
    </script>
</body>
</html>

Offset 系列属性

offsetTop & offsetLeft

offsetTop: 元素相对于最近的定位祖先元素（position != static）顶部的距离。如果没有这样的祖先，则相对于初始包含块（通常是视口）。
offsetLeft: 元素相对于最近的定位祖先元素左侧的距离。如果没有这样的祖先，则相对于初始包含块。

offsetParent

offsetParent: 返回一个指向最近的设置了 position 属性（除了static之外）的祖先元素。如果没有这样的祖先，则返回 null 或者 <body> 元素。

offsetHeight & offsetWidth

offsetHeight: 包括 content + padding + border 的总高度。
offsetWidth: 包括 content + padding + border 的总宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Offset Properties Example</title>
    <style>
        #outer {
            position: relative;
            top: 50px;
            left: 50px;
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }
        #inner {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="outer">
        Outer Div
        <div id="inner">Inner Div</div>
    </div>
    <button onclick="logOffsetProperties()">Log Offset Properties</button>

    <script>
        function logOffsetProperties() {
            const outer = document.getElementById('outer');
            const inner = document.getElementById('inner');

            console.log(`Outer div's offsetTop: ${outer.offsetTop}, offsetLeft: ${outer.offsetLeft}`);
            console.log(`Inner div's offsetTop: ${inner.offsetTop}, offsetLeft: ${inner.offsetLeft}`);

            console.log(`Outer div's offsetHeight: ${outer.offsetHeight}, offsetWidth: ${outer.offsetWidth}`);
            console.log(`Inner div's offsetHeight: ${inner.offsetHeight}, offsetWidth: ${inner.offsetWidth}`);

            console.log(`Inner div's offsetParent: `, inner.offsetParent);
        }
    </script>
</body>
</html>

Client 系列属性

clientTop & clientLeft

clientTop: 边框的厚度（上边框），不包括外边距、内填充或水平滚动条。
clientLeft: 左侧边框的厚度。

clientHeight & clientWidth

clientHeight: 可见区域的高度，包括内填充但不包括边框、外边距或水平滚动条。
clientWidth: 可见区域的宽度，包括内填充但不包括边框、外边距或垂直滚动条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Client Properties Example</title>
    <style>
        #element {
            width: 200px;
            height: 200px;
            margin: 20px;
            padding: 10px;
            border: 5px solid red;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <div id="element">
        Some long text here... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <button onclick="logClientProperties()">Log Client Properties</button>

    <script>
        function logClientProperties() {
            const element = document.getElementById('element');

            console.log(`clientTop: ${element.clientTop}`); // Border thickness (top)
            console.log(`clientLeft: ${element.clientLeft}`); // Border thickness (left)

            console.log(`clientHeight: ${element.clientHeight}`); // Visible area including padding but excluding borders and scrollbar
            console.log(`clientWidth: ${element.clientWidth}`); // Same logic applies horizontally
        }
    </script>
</body>
</html>

总结

`scroll`	`scrollTop`	元素内容垂直滚动的像素数。
	`scrollLeft`	元素内容水平滚动的像素数。
	`scrollHeight`	元素内容的总高度，包括在视口中不可见的部分。
	`scrollWidth`	元素内容的总宽度，包括在视口中不可见的部分。
`offset`	`offsetTop`	元素顶部相对于包含元素的顶部的距离。
	`offsetLeft`	元素左边缘相对于包含元素左边缘的距离。
	`offsetHeight`	元素的高度，包括边框和内边距。
	`offsetWidth`	元素的宽度，包括边框和内边距。
`client`	`clientTop`	元素的上边框的宽度。
	`clientLeft`	元素的左边框的宽度。
	`clientHeight`	元素的内部高度，不包括水平滚动条高度。
	`clientWidth`	元素的内部宽度，不包括垂直滚动条宽度。