| 图解滚动：scrollTop / innerHeight / scrollHeight

概念

Dom 相关 api 参见：

关系图解

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 时，可使用
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容