如果元素滚动到底，下面等式返回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
网友评论