先用文字介绍一下这四个属性。
scrollLeft 返回当前元素的左边界到它的包含元素的左边界的偏移量。
scrollTop 返回或设置匹配元素的滚动条的垂直位置。
scrollWidth 返回元素的完整的宽度，包括内边距。
scrollHeight 返回元素的完整的高度 ，包括内边距。
<html>
<body>
<div id=\"demo\" style=\"border:1px solid red;width:150px; height:200px; margin:10px; padding:20px; overflow:auto;\">
先用文字介绍一下这四个属性。
scrollLeft(scrollLeft详解) 返回当前元素的左边界到它的包含元素的左边界的偏移量。
scrollTop(scrollTop详解) 返回或设置匹配元素的滚动条的垂直位置。
scrollWidth(scrollWidth详解) 返回元素的完整的宽度，包括内边距。
scrollHeight(scrollHeight详解) 返回元素的完整的高度 ，包括内边距。
</div>
</body>
</html>
scrollHeight=滚动条可见高度+滚动条不可见高度；
scrollWidth=滚动条可见宽度+ 滚动条不可见宽度。
如图所示:
![\"js中scrollLeft,](\"/images/scrollLeft_scrollTop_scrollWidth_scrollHeight.png\")
![\"js中scrollLeft,](\"/images/scrollLeft_scrollTop_scrollWidth_scrollHeight_1.png\")
继续阅读与本文标签相同的文章
下一篇 :
js 遍历DOM实例详解
-
小孩拉粑粑，可穿戴设备实时监控，5G对C端的改变也是颠覆性的
2026-05-15栏目： 教程
-
《率土之滨》四周年活动预告
2026-05-15栏目： 教程
-
微软Chromium版Edge浏览器高对比度模式曝光
2026-05-15栏目： 教程
-
我国最低调科技巨头，31天狂揽64亿，让苹果、华为都乖乖为其交钱！
2026-05-15栏目： 教程
-
4.3 UI设计之邻近原则
2026-05-15栏目： 教程