<p>scrollTop 和 scrollLeft 用于获取或设置 DOM 元素的垂直与水平滚动偏移量（像素），其最大值分别为 scrollHeight - clientHeight 和 scrollWidth - clientWidth。</p>
scrollTop 和 scrollLeft 是 DOM 元素上用于控制和获取**垂直与水平滚动偏移量**的属性，它们直接反映元素内容区域相对于其可视区域左上角的滚动距离（单位：像素）。
如何获取当前滚动位置
读取这两个属性即可获得当前滚动偏移：
-
scrollTop：返回元素顶部被隐藏（向上滚动）的像素数；未滚动时为
0；若内容未溢出，值也为0。 -
scrollLeft：返回元素左侧被隐藏（向左滚动）的像素数；同理，无水平滚动或内容不溢出时为
0。
示例：
const box = document.getElementById('myBox');
console.log(box.scrollTop); // 当前垂直滚动距离
console.log(box.scrollLeft); // 当前水平滚动距离如何设置滚动位置
对这两个属性赋值可直接触发滚动（同步生效，无需额外方法）：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
- 设为
0可快速回到顶部/最左端； - 设为大于
0的值，会滚动到对应位置（超出最大可滚动范围时，浏览器自动限制为最大值）； - 注意：目标元素必须有
overflow: auto或scroll才能产生滚动条并支持滚动操作。
示例：
box.scrollTop = 100; // 垂直滚动到距顶部 100px 处 box.scrollLeft = 50; // 水平滚动到距左侧 50px 处
最大可滚动值怎么算
实际可滚动的最大值不是无限的，由内容尺寸和容器尺寸共同决定：
- 最大 scrollTop =
scrollHeight - clientHeight - 最大 scrollLeft =
scrollWidth - clientWidth
其中：scrollHeight 是元素内容的总高度（含不可见部分），clientHeight 是可视区域高度（不含滚动条、边框、内边距）。
常见注意事项
- 这些属性只对具有滚动能力的元素有效（如
div、textarea），body在不同浏览器中行为不一致，推荐用document.documentElement或document.body组合判断； - 在页面加载完成前读取可能得到
0（因布局未完成），建议在DOMContentLoaded或load后操作； - 设置后立即读取可能仍为旧值（尤其在动画中），如需确保，可用
requestAnimationFrame延迟读取。
