在学习图片懒加载几个版本的实现对比的时候,自己写个例子:代码 发现document.documentElement.clientHeight
拿到的高度居然很高,不是视窗可视区域的高度,而是所有item之和的高度。
html节点的clientHeight跟scrollHeight居然都是1000,body的clientHeight为874,scrollHeight为10000 既然滚动条在body这层,那么html节点就不应该有那么高,应该是874左右才对。翻看了几个站点,比如掘金,发现滚动条都在html节点这层,html节点的clientHeight就是视窗的可视区域高度,远小于scrollHeight,看看其css设置发现并没有特殊之处。第二天才注意到头部的<!DOCTYPE html>
加上后果然,滚动条就是在html节点,html节点的clientHeight就是视窗的高度。我用的是chrome,从结果反推回去chrome默认使用的并不是文档模式的标准模式。所以切记写HTML的时候头部加上文档类型的声明。引用mdn说的:范例中的DOCTYPE,<!DOCTYPE html>,是所有可用的 DOCTYPE 之中最简单的,也是 HTML5 所推荐的。