如何判断可滚动区域是否滑到底部

判断可滚动区域是否滑到底部，核心是比较三个属性：

• scrollTop — 已滚动的距离（顶部被隐藏的高度）
• clientHeight — 容器可见区域的高度
• scrollHeight — 内容的总高度（包括被隐藏的部分）

当 scrollTop + clientHeight >= scrollHeight 时，说明已经滑到底部。

实际使用中，由于浮点精度问题，通常加一个 1px 的容差：

element.scrollTop + element.clientHeight >= element.scrollHeight - 1

用一张关系图来理解：

┌─────────────────────┐  ─┐
│  (scrollTop 区域)    │   │
│  已滚过、看不见的内容 │   │
├─────────────────────┤  ─┤  ── scrollHeight（总高度）
│                     │   │
│  可见区域            │   │  ── clientHeight
│                     │   │
├─────────────────────┤  ─┤
│  还没滚到的内容      │   │
└─────────────────────┘  ─┘

到底时：scrollTop + clientHeight = scrollHeight，即下方"还没滚到的内容"高度为 0。

这里的 offsetHeight 和 clientHeight 的区别在于 offsetHeight 包含 border，clientHeight 不包含。对于没有 border 的元素两者等价。