滚动条出现的原理
总结css去掉滚动条
容器元素的 clientWidth ⼩于 scrollWidth 时，在容器元素上会出现滚动条。
容器元素的 scrollWidth 等于内部元素的 clientWidth
由于 clientWidth 不包含滚动条，所以当滚动条已存在时。即使容器的宽度能完全展⽰内部元素，滚动条依然会存在。即只有当内部元素的宽度 = 容器 clientWidth + 滚动条宽度时滚动条才消失。
Element
Element 是⼀个通⽤性⾮常强的基类，所有 Document 对象下的对象都继承⾃它。这个接⼝描述了所有相同种类的元素所普遍具有的⽅法和属性。⼀些接⼝继承⾃ Element 并且增加了⼀些额外功能的接⼝描述了具体的⾏为。例如， HTMLElement 接⼝是所有 HTML 元素的基本接⼝，⽽ SVGElement 接⼝是所有 SVG 元素的基础。
clientWidth 表⽰该元素内部的宽度
该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。
该属性值会被四舍五⼊为⼀个整数。如果你需要⼀个⼩数值，可使⽤BoundingClientRect()
scrollWidth 表⽰元素的滚动视图宽度
包括由于overflow溢出⽽在屏幕上不可见的内容。
它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）
包括伪元素的宽度，例如::before或::after
这个属性会进⾏四舍五⼊并返回整数，如果你需要⼩数形式的值，使⽤BoundingClientRect().
如果元素的内容可以适合⽽不需要⽔平滚动条，则其scrollWidth等于clientWidth
HTMLElement
HTMLElement 接⼝表⽰所有的 HTML 元素。
offsetWidth 元素⾃⾝可视宽度加上左右border的宽度
各浏览器的offsetWidth可能有所不同
offsetWidth是测量包含元素的边框(border)、⽔平线上的内边距(padding)、竖直⽅向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。
这个属性将会 round(四舍五⼊)为⼀个整数。如果你想要⼀个fractional(⼩数)值，请使⽤BoundingClientRect().

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。