判定元素是否滚动到底

如果元素滚动到底，下面等式返回true，没有则返回false.

element.scrollHeight - element.scrollTop === element.clientHeight

Element.scrollHeight : 元素内容高度，包括由于溢出导致的视图中不可见内容。

• 没有垂直滚动条的情况下，scrollHeight 值与元素视图填充所有内容所需要的最小值clientHeight 相同。
• 包括元素的padding，但不包括元素的border和margin。
• scrollHeight 也包括 ::before 和 ::after 这样的伪元素。
• 属性值将会对值四舍五入取整。如果需要小数值，使用 Element.getBoundingClientRect()。
• 只读属性，整数，不带单位。

scrollHeight.png

Element.scrollTop : 可以获取或设置一个元素的内容垂直滚动的像素数。

• 一个元素的 scrollTop 值是这个元素的顶部到它的最顶部可见内容（的顶部）的距离的度量。（也就是页面中当前视口之前已经观看的内容）
• 当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。
• 是一个整数，即 element 的内容向上滚动的像素数。
• 同时，scrollTop 可以被设置为任何整数值。（跳转到某个位置时常用）

设置为任何整数值时，需注意：

• 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0。
• 设置scrollTop的值小于0，scrollTop 被设为0。
• 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。

scrollTop.png

Element.clientHeight: 元素内部的高度（单位像素），包含内边距，但不包括水平滚动条、边框和外边距。

• Element 为body时，大多是视口大小。
• 对于没有定义CSS或者内联布局盒子的元素为0。
• 只读属性，整数

clientHeight.png

延伸：
当判断元素不是滚到底，而是滚到某个元素的顶部时，例如让弹窗在到达底部导航时固定。

image.png

可以在element.scrollHeight - element.scrollTop === element.clientHeight这条公式变形。

element.scrollHeight - element.scrollTop - element.clientHeight <= element.clientHeight（底部导航）
让弹窗固定在底部导航上的这个位置
else
一直保持在视口的右下角

上面的知识点主要来自MDN。
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight