盒子模型
- 滚动条出现条件
- 当 scrollHeight 大于 clientHeight 时出现
- 当原本有时，scrollHeight + 滚动条高度 等于 clientHeight 时消失
- clientHeight:
- 内联元素为0。
- 包含内距、::before 和 ::after伪元素。
- 不包括滚动条、边框和外边距。
- offsetHeight:
- 包括边框、内距和滚动条。
- 不包含:before或:after等伪类元素的高度。
- 是一个整数。
- scrollHeight:
- 当前元素没有垂直滚动条的情况下，与元素视图填充所有内容所需要的最小clientHeight相同。
- 当前元素内容实际高度
- 包括元素的padding，包括 ::before 和 ::after这样的伪元素，但不包括元素的border和margin
- 是一个整数
- clientTop:
- 元素顶部边框的宽度
- offsetTop:
- 当前元素相对于其 最近定位元素 或 table, td, th，body元素 的顶部的距离
- 包括相对元素的外距。
- 不包括当前元素的边框。
- scrollTop:
- 元素的顶部（实际顶部）到视口可见内容（的顶部）的距离
- 当一个元素的内容没有产生垂直方向的滚动，那么它的 scrollTop 值为0。滚动时为正数
- getBoundingClientRect():
- 返回值是一个 DOMRect 对象
- DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。
- 除了 width 和 height 外的属性都是元素实际大小所在位置相对于视口的左上角位置而言的。(bottom相对于视口上边的宽度)