刚刚帮朋友写一个样式加载数据的时候,用到了这样的一个语句,document.documentElement.clientHeight,
<body>
<h1>x</h1>
<div class="box">
<ul>
<li><img src="1.jpg" alt="111111"></li>
<li><img src="2.jpg" alt="111111"></li>
<li><img src="3.jpg" alt="111111"></li>
<li><img src="4.jpg" alt="111111"></li>
<li><img src="5.jpg" alt="111111"></li>
<li><img src="6.jpg" alt="111111"></li>
<li><img src="7.jpg" alt="111111"></li>
<li><img src="8.jpg" alt="111111"></li>
<li><img src="9.jpg" alt="111111"></li>
<li><img src="10.jpg" alt="111111"></li>
<li><img src="11.jpg" alt="111111"></li>
<li><img src="12.jpg" alt="111111"></li>
<li><img src="13.jpg" alt="111111"></li>
<li><img src="14.jpg" alt="111111"></li>
<li><img src="15.jpg" alt="111111"></li>
<li><img src="1.jpg" alt="111111"></li>
<li><img src="2.jpg" alt="111111"></li>
<li><img src="3.jpg" alt="111111"></li>
<li><img src="4.jpg" alt="111111"></li>
<li><img src="5.jpg" alt="111111"></li>
<li><img src="6.jpg" alt="111111"></li>
<li><img src="7.jpg" alt="111111"></li>
<li><img src="8.jpg" alt="111111"></li>
<li><img src="9.jpg" alt="111111"></li>
<li><img src="10.jpg" alt="111111"></li>
<li><img src="11.jpg" alt="111111"></li>
<li><img src="12.jpg" alt="111111"></li>
<li><img src="13.jpg" alt="111111"></li>
<li><img src="14.jpg" alt="111111"></li>
<li><img src="15.jpg" alt="111111"></li>
</ul>
<div id="jz">点击加载更多</div>
</div>
结构就是上面。box没有设置样式高度。这个时候我要取可视区的高度就用:document.documentElement.clientHeight 可以了
但是因为我要给最下面的加载定位,必须要有高度,我就动态设置了box的高度。然后我就发现一个很不容易发现的问题,效果和我原来的算法不一样,浏览器并没有报错。
我一直在找原因,经过1个小时的BUG排查,打印出console.log(document.documentElement.clientHeight),惊人的发现,这并不是可视区域的高度,是整个网页的高度。
网上查找一些资料,很多人说是因为DTD也就是W3C声明的原因。具体我也没在意。我换成了console.log(document.body.clientHeight) 这个时候可视区域的高度就出来了。
现在这个规律是,当你在body体里面设置了界定的高度,并且这个高度大于你可视区域的高度(也就是有滚动条了),这个时候你取可视区域的高度要用document.body.clientHeight
当body里面的内容也产生了滚动条,但是你没有在样式中设置,这个时候你去可视区域的高度用document.documentElement.clientHeight。
documentElement是文档的根节点。body只是个节点。