由scrollLeft想起的周边

1. scrollLeft、scrollTop

• scrollLeft : 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
  • scrollLeft 可以是任意整数
  • 如果元素不能滚动（比如：元素没有溢出），那么scrollLeft 的值是0
  • 如果给scrollLeft 设置的值小于0，那么scrollLeft 的值将变为0。 如果给scrollLeft
  • 设置的值大于元素内容最大宽度，那么scrollLeft 的值将被设为元素最大宽

• scrollTop : 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
  • scrollTop 可以被设置为任何整数值
  • 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0
  • 设置scrollTop的值小于0，scrollTop 被设为0
  • 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值

2. offsetLeft、offsetTop

• offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离
• offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离
  

3. scrollWidth、clientWidth、offsetWidth

• scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大
• clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变
• offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变

情况1：元素内无内容或者内容不超过可视区，滚动不出现或不可用的情况下

• scrollWidth=clientWidth，两者皆为内容可视区的宽度
• offsetWidth为元素的实际宽度
  

情况2：元素的内容超过可视区，滚动条出现和可用的情况下

• scrollWidth>clientWidth
• scrollWidth为实际内容的宽度
• clientWidth是内容可视区的宽度
• offsetWidth是元素的实际宽度
  

4. clientHeight，scrollHeight，offsetHeight

• clientHeight : 可理解为内部可视区高度，样式的height+上下padding
• scrollHeight : 内容的实际高度+上下padding（如果没有限制div的height，即height是自适应的，一般是scrollHeight==clientHeight）
• offsetHeight : 可理解为div的可视高度，样式的height+上下padding+上下border-width

参考

https://blog.csdn.net/u012755393/article/details/79746033
https://www.cnblogs.com/pengshengguang/p/8021743.html