问题

• 项目中遇到滚动触底刷新，那么滚动到什么位置才算触底？
• 滚动效果: 内容实际高度 超出布局高度

    .box {
      width: 400px;
      height: 200px;
      padding: 20px;
      border: solid 20px;
      margin: 50px;
      overflow: auto;
    }

offsetHeight

= 内容高度 + 垂直内边距和边框，且是一个整数;
= padding-top + padding-bottom + border-top + border-bottom;

• 可看作是 布局高度

这个属性值会被四舍五入为整数值，如果你需要一个浮点数值，请用 el.getBoundingClientRect()

clientHeight

= 内容高度 + 上下padding - 水平滚动条高度

• 可看作是视觉上没有被遮挡的高度；

这个属性值会被四舍五入为整数值，如果你需要一个浮点数值，请用 el.getBoundingClientRect()

scrollHeight

= 内容实际高度，包括由于溢出导致的视图中不可见内容

• scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。

• 没有垂直滚动条的情况下，scrollHeight 值与元素视图填充所有内容所需要的最小值clientHeight相同。

• 包括元素的 padding，但不包括元素的 border 和 margin。

scrollTop

• 内容实际高度开始位置（卷起来的）到它的视口可见内容的顶部的距离的度量。

• 当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

• 在使用显示比例缩放的系统上，scrollTop可能会提供一个小数。

• 所以Math.abs(element.scrollTop)

使用

1、 触底判断

element.scrollHeight - Math.abs(element.scrollTop) === element.clientHeight

2、滚动判断

当容器不滚动但有溢出的子容器时，这些检查可以确定容器能否滚动：

window.getComputedStyle(element).overflowY === 'visible'
window.getComputedStyle(element).overflowY !== 'hidden'