scrollWidth 和 scrollHeight 是只读属性，返回元素内容区域总宽高（含 padding、子元素实际尺寸，不含 border/margin），即使无溢出也至少等于 clientWidth/clientHeight。
scrollWidth 和 scrollHeight 是元素的只读属性，用于获取元素**内容区域的总宽高**（包括不可见的溢出部分），单位为像素。它们不依赖于是否设置了 overflow: hidden 或是否有滚动条，只要内容实际尺寸超过元素的可视区域（clientWidth/clientHeight），这两个值就会大于可视尺寸。
scrollWidth 和 scrollHeight 的准确含义
它们反映的是元素内部所有内容（含 padding，不含 border、margin）在水平/垂直方向上“实际占据”的总尺寸：
- scrollWidth = 内容实际总宽度（左内边距到右内边距的最远距离）
- scrollHeight = 内容实际总高度（上内边距到下内边距的最远距离）
- 即使内容没溢出（比如内容很短），它们也返回最小可容纳全部内容的尺寸（至少等于
clientWidth/clientHeight） - 它们不包含 border、outline、margin，但包含 padding 和子元素的盒模型贡献
如何正确获取（注意时机和条件）
直接读取即可，但需确保元素已渲染且尺寸稳定：
- 在 DOM 加载完成后再访问：用
DOMContentLoaded或将脚本放在</body>前 - 若元素是动态生成或样式异步加载（如图片未加载完、字体未就绪），可能需要延迟（如
requestAnimationFrame或img.onload） - 对于
display: none的元素，scrollWidth/scrollHeight返回0；可临时设为visibility: hidden; position: absolute再读取（避免影响布局） - 示例：
const el = document.getElementById('myDiv'); console.log(el.scrollWidth, el.scrollHeight);
和 clientWidth/clientHeight、offsetWidth/offsetHeight 的区别
别混淆这几个常用尺寸属性：
立即学习“Java免费学习笔记（深入）”；
-
clientWidth/clientHeight：可视区域宽高（含 padding，不含 border、滚动条、margin） -
offsetWidth/offsetHeight：元素整体占位宽高（含 padding + border + 滚动条，但不含 margin） -
scrollWidth/scrollHeight：内容总宽高（含 padding + 所有子内容的实际延伸，不管是否可见） - 当内容刚好填满无溢出时，三者可能相等；一旦内容超出，
scrollWidth > clientWidth就成立
常见用途与小技巧
这些属性常用于滚动控制、懒加载、尺寸检测等场景：
- 判断是否发生水平溢出：
el.scrollWidth > el.clientWidth - 判断是否发生垂直溢出：
el.scrollHeight > el.clientHeight - 实现“滚动到底部”：
el.scrollTop = el.scrollHeight - el.clientHeight - 监听内容变化？注意：它们不是响应式属性，DOM 改变后需重新读取；可用
MutationObserver或 resize observer（配合ResizeObserver监听尺寸变化）辅助
