判断滚动条是否滚到底部的原理图解

假设现在有一个网页A, 它的高度为scrollHeight;

image.png

我们浏览器的窗口高度为clientHeight,

image.png

，
在网页向下翻动的过程中，会出现以下情况

image.png

网页被卷上去的高度为scrollTop,
那么滚动条到底部时，网页与浏览器窗口如下所示

image.png

这样，我们就可以得到滚动条是否滚到底部的判断条件是

scrollHeight = scrollTop + clientHeight

所以在实现时我们只要获取这三个值就可以了，而这三个值js都有对应的api获取，分别是
document.body.scrollHeight || document.documentElement.scrollHeight
document.body.scrollTop || document.documentElement.scrollTop
document.body.clientHeight || document.documentElement.clientHeight
注意：不同的浏览器可能获取这三个值的方式有些许差别

其他类似api有

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
document.documentElement.scrollTop =>窗口滚动条滚动高度
在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
document.documentElement.scrollTop =>窗口滚动条滚动高度
在chrome中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
document.body.scrollTop =>窗口滚动条滚动高度
在Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高
滚动到顶部 window.scrollTo(0,0)
滚动到尾部 window.scrollTo(0,document.body.clientHeight) 

参考文档：
判断滚动条是否到底部 - 知乎 (zhihu.com)