关于clientHeight/clientWidth和scrollHeight/scrollWidth的相关知识点

喜欢ヅ旅行 2022-09-26 03:59 174阅读 0赞

如果要用原生JS来确定元素的大小，在开发中想必都踩过clientHeight/clientWidth以及scrollHeight/scrollWidth的坑。  
　　首先是在不包含滚动条的情况下使用clientWidth和scrollWidth以及clientHeight和scrollHeight来确定文档总高度（也就是基于视口的最小高度时），不同浏览器有不同的区别。在JavaScript高级程序设计第三版中是这么描述的：

> Firefox中这两对属性始终是相等的，但大小是代表文档内容区域的实际尺寸，非视口尺寸。  
> Opera、Safari3.1及更高版本、Chrome中这两个属性是有区别的，其中scrollWidth和scrollHeight等于视口大小，而clientWidth和clientHeight等于文档内容大小。  
> ie中scrollWidth和scrollHeight等于文档内容大小，而clientWidth和clientHeight等于视口大小。

至于视口和文档实际内容的区别在哪，就是你可以试着把html写死，比如500px，视口，我亲测是ie8以后，ie对这俩属性也始终是相等的，都等于视口高度，而最新版谷歌依然不相等，且ie8对这俩属性和offSetHeight属性有4px的差值（ie9就没了，我将body的margin和padding都是设为了0，不知道问题在哪，可能是因为浏览器边缘线的原因）。  
　　而且还有一个很有意思的地方就是我发现设置body的height为100%后，再给body设置margin。ie8以前和chrome两个浏览器的scrollHeight都将大于clientHeight。Chrome的行为相对好理解，毕竟视口增加了margin比文档的视觉区域大，所以当然就scrollHeight更大了。但IE的行为。。。。。额。。。。。令人费解。  
　　而在有滚动条的情况下，用scrollHeight来取得文档总高度，clientHeight则是视口高度，分别有不同的应用，这个就无需多说了。  
　　此外新属性innerHeight则是可以永远获取视口高度，但是会包含滚动条，说到这ie9包括ie10的offsetHeight和scrollHeight是包括滚动条的，chrome则不包括。

var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
    
    var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);

在对样式进行reset后其实这个问题就不存在了，所以这段代码的运用并不是很多，仅作为一个小坑了解一下。（当然也许还有其他情况，但我目前没有遇到。）

--------------------

另外一个更大的坑我想大家都碰到过就是document.documentElement.scrollTop和document.body.scrollTop的运用，原则上按照W3C标准来说，对使用了文档申明也就是运行在标准模式下的浏览器在使用时，都应该使用前者，而混杂模式下使用后者。本来相安无事，大家一般都按标准做事，记一个前者用不就行了么。可Webkit 特立独行，对于页面滚动条位置，没有按照标准处理。所以对于Safari浏览器和Chrome浏览器，要取得非0值，还是只有用后者。这个坑想必坑了无数人。  
　　所以为了兼容所有浏览器，最好的写法是：

var top = document.documentElement.scrollTop || document.body.scrollTop;