滚动条出现的原理

• 容器元素的 clientWidth 小于 scrollWidth 时，在容器元素上会出现滚动条。
• 容器元素的 scrollWidth 等于内部元素的 clientWidth
• 由于 clientWidth 不包含滚动条，所以当滚动条已存在时。即使容器的宽度能完全展示内部元素，滚动条依然会存在。即只有当内部元素的宽度 = 容器 clientWidth + 滚动条宽度时滚动条才消失。

Element

• Element 是一个通用性非常强的基类，所有 Document 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。例如， HTMLElement 接口是所有 HTML 元素的基本接口，而 SVGElement 接口是所有 SVG 元素的基础。
• clientWidth 表示该元素内部的宽度
  • 该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。
  • 该属性值会被四舍五入为一个整数。如果你需要一个小数值，可使用element.getBoundingClientRect()
• scrollWidth 表示元素的滚动视图宽度
  • 包括由于overflow溢出而在屏幕上不可见的内容。
  • 它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）
  • 包括伪元素的宽度，例如::before或::after
  • 这个属性会进行四舍五入并返回整数，如果你需要小数形式的值，使用element.getBoundingClientRect().
• 如果元素的内容可以适合而不需要水平滚动条，则其scrollWidth等于clientWidth

HTMLElement

• HTMLElement 接口表示所有的 HTML 元素。
• offsetWidth 元素自身可视宽度加上左右border的宽度
  • 各浏览器的offsetWidth可能有所不同
  • offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。
  • 这个属性将会 round(四舍五入)为一个整数。如果你想要一个fractional(小数)值,请使用element.getBoundingClientRect().