概念
Dom 相关 api 参见:
Element.scrollTop
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTopWindow.innerHeight
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/innerHeightElement.scrollHeight
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight
关系图解
image.png
实验代码
// 滚动距离
document.documentElement.scrollTop
// document.body.scrollTop --这个在 chrome 中测试始终为 0,不可使用
window.scrollY
window.pageYOffset
// 可视区高度
document.documentElement.clientHeight
// document.body.clientHeight --这个在 chrome 中测试为文档高度,不可使用
window.innerHeight
// 文档高度
document.documentElement.scrollHeight
// document.body.scrollHeight --当 body 无垂直方向上的 margin 时,可使用