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 scrollbarconsole.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 | 元素的内部宽度，不包括垂直滚动条宽度。 |
