JS元素的scrollHeight & scrollWidth

首先说FF与IE8的不同，当一个div包含另一个div，外围div有border而没有滚动条（不设置overflow）时:

FF中外层div的scrollHeight和scrollWidth都会将边框加上，在内容滚动后，就不包含滚动条的宽度 == offsetWidth和offsetHeight。

IE8中无此现象。

接这点，当内部div宽度和高度超过外层div宽度且不设置滚动时：

FF中外层div的scrollHeight和scrollWidth与上点相同。

IE8中外层div的scrollHeight 和scrollWidth都会变为内部div大小，虽然外层div并没有扩大（隐式滚动条？）。

第二点，当外层div包含padding属性时且内容滚动时，FF与IE8中的scrollHeight和scrollWidth都恢复正常。

但当为外围div加上padding时（注意，是padding，为所有四边都加上）， 由于滚动条的原因，右侧及下方的padding都会被隐藏而不包含在scrollHeight和scrollWidth中。

（此时的offsetWidth和offsetHeight都会包含上下及左右的padding。）

滚动条宽度为17px（我的系统）。 

 当padding小于17像素，这时的scrollWidth和scrollHeight为 （内容由于被padding撑起，offset和client—width、height也会发生变化）外层div的高度、宽度加上一边的padding，当padding逐渐变大，当大于17时，如为18px，此时 才会为scrollWidth和scrollHeight加上 18+18-17像素最后为19像素。此时由于滚动条不能滚动，这时clientHeight/clientWidth与scrollHeight/scrollWidth相同。

 

就是说scrollWidth/scrollHeight从名字上考虑，就不用记忆这么多， 既然是scroll的，就是说指的能滚动的内容的宽度和高度，当padding小于17像素被滚动条遮挡，那么遮挡的部分内容是不能滚动的，所以自然就不包含隐藏的那部分了。

 

没事瞎总结，可能不适用于不同的浏览器。 

 

转载于:https://www.cnblogs.com/lemoncolaz/archive/2012/05/16/2504053.html