Skip to content

Instantly share code, notes, and snippets.

@jokemmy

jokemmy/offsetHeight-clientHeight-scrollHeight.md

Last active September 13, 2017 09:26
Show Gist options
  • Save jokemmy/5133a0255786454fee245277b016d774 to your computer and use it in GitHub Desktop.
Save jokemmy/5133a0255786454fee245277b016d774 to your computer and use it in GitHub Desktop.
Download ZIP
offsetHeight, clientHeight与scrollHeight的区别
Raw
offsetHeight-clientHeight-scrollHeight.md

normal elemtnt

clientHeight

box-sizing: border-box;

clientHeight = height - borderTop - borderBottom - scrollBar

box-sizing: content-box;

clientHeight = height + paddingTop + paddingBottom - scrollBar

offsetHeight

box-sizing: border-box;

offsetHeight = height

box-sizing: content-box;

offsetHeight = height + paddingTop + paddingBottom + borderTop + borderBottom

scrollHeight

scrollHeight >= clientHeight

body and documentElement

body clientHeight

box-sizing: border-box;

clientHeight = height - borderTop - borderBottom

box-sizing: content-box;

clientHeight = height + paddingTop + paddingBottom

body offsetHeight

box-sizing: border-box;

offsetHeight = height

box-sizing: content-box;

offsetHeight = height + paddingTop + paddingBottom + borderTop + borderBottom

body scrollHeight

scrollHeight = documentElement.scrollHeight

documentElement clientHeight

box-sizing: border-box;

clientHeight = window.innerHeight - scrollbar

box-sizing: content-box;

clientHeight = window.innerHeight - scrollbar

documentElement offsetHeight

box-sizing: border-box;

offsetHeight = height

box-sizing: content-box;

offsetHeight = height + paddingTop + paddingBottom + borderTop + borderBottom

documentElement scrollHeight

scrollHeight = content height

the scrollbar appears when

  1. scrollHeight > clientHeight

  2. window.innerHeight > documentElement.clientHeight

  3. dom.offsetHeight - dom.borderTop - dom.borderBottom > dom.clientHeight

**注：**body documentElement 只有一个是设置了 overflow: scroll 的情况

如果 body documentElement 都有 overflow: scroll，那么 body 就跟普通 dom 表现一样

documentElement offsetWidth

clientWidth = offsetWidth

Raw
摘抄.md

scrollHeight的争议比较大，有些浏览器认为scrollHeight可以小于clientHeight，有些认为scrollHeight至少应该等于clientHeight。但有一点是一样的，就是scrollHeight >= topPadding + bottomPadding + 内容margin box的高度。

在浏览器中的区别在于：

IE6、IE7 认为scrollHeight 是内容高度，可以小于clientHeight。

FF 认为scrollHeight 是内容高度，不过最小值是clientHeight。

注： 以上都是对于一般元素而方言的，body和documentElement的clientHeight, offsetHeight和scrollHeight在各个浏览器中的计算方式又不同。

在所有的浏览器中，如果你想获取视窗可见部分的高度，应该使用documentElement.clientHeight，因为body.clientHeight是由它的内容决定的。

FF30

注意：Firefox30中，水平滚动条的宽度是17个像素。

body

offsetHeight = body.padding + body.border + body.height(CSS设置或内容撑的);

clientHeight = body.padding + body.height(CSS设置或内容撑的);

scrollHeight >= clientHeight;

documentElement

offsetHeight = body.offsetHeight + body.margin;

clientHeight = window窗口可见高度;

scrollHeight >= clientHeight

因此，只是获取窗口可见高度，在FF中得用documentElement.clientHeight，获取整个页面的高度，则应该用documentElement.scrollHeight。

元素

offsetHeight = padding +border + height；

clientHeight = padding +height -水平滚动条的高度。

scrollHeight >=clientHeight

总结：从body, documentElement, 元素的结果分析，FireFox认为scrollHeight的最小高度是clientHeight。

offsetLeft = 元素border左上角到window视窗原点的距离 或 到offsetParent的border box顶部的距离。

Chrome 39

注意：Chrome39中，水平滚动条的宽度是17个像素。

body

offsetHeight = body.padding+ body.border + body.height（CSS设置或内容撑大）；

clientHeight= body.pdding + body.height（CSS设置或内容撑大）；

scrollHeight >= offsetHeight; 并且scrollHeight >= window窗口可见高度；

如果body没有内容(空的)：

body.offsetHeight == documentElement.offsetHeight;

body.clientHeight ==documentElement.clientHeight;

body.scrollHeight ==documentElement.scrollHeight;

而且以上属性的值都是浏览器的视窗高度。

documentElement

offsetHeight = scrollHeight = body.offsetHeight+ body.margin;

clientHeight = window视窗可见高度;

如果body内容过短，则documentElement的offsetHeight和scrollHeight将比clientHeight小。

因此，只是获取页面窗口可视部分高度，在Chrome中用documentElement.clientHeight；获取整个页面内容最大高度（如果比窗口小，取窗口的高度），则应该用body.scrollHeight；获取页面内容的实际高度，应该使用body.offsetHeight()。

元素

offsetHeight = padding + border + height；

clientHeight = padding + height -水平滚动条的高度；

scrollHeight >= clientHeight；

offsetLeft = 元素border左上角到画布原点的距离 或 到offsetParent的border box顶部的距离。

IE9

注意：IE9中，滚动条的宽度是17个像素。

body

offsetHeight = body.padding +body.border + body.height(CSS设置或内容撑大);

clientHeight = body.padding + body.height(CSS设置或内容撑大);

scrollHeight >= clientHeight;

documentElement

offsetHeight = clientHeight + 水平滚动条的高度;

clientHeight = window窗口可见高度

scrollHeight >= clientHeight并且scrollHeight >= body.offsetHeight

因此，只是获取window窗口可见高度，在IE9中得用documentElement.clientHeight，获取整个页面内容的高度，则应该用documentElement.scrollHeight。

元素

offsetHeight = padding +border + height。

clientHeight = padding +height - 滚动条的宽度。

scrollHeight >=clientHeight;

总结：从body, documentElement, 元素的结果分析，IE9认为scrollHeight的最小高度是clientHeight。

从结果分析，IE9认为scrollHeight的最小高度是clientHeight。

IE8

注意：IE8中，滚动条的宽度是17个像素。

body

offsetHeight = body.padding +body.border + body.height(CSS设置或内容撑大);

clientHeight = body.padding + body.height(CSS设置或内容撑大);

scrollHeight >= clientHeight;

documentElement

offsetHeight = clientHeight + 水平滚动条的高度 + body.border

clientHeight = window窗口可见高度

scrollHeight >= clientHeight并且scrollHeight >= body.offsetHeight

因此，只是获取窗口可见高度，在IE8中得用documentElement.clientHeight，获取整个页面内容高度，则应该用documentElement.scrollHeight。

元素上

offsetHeight = padding +border + height。

clientHeight = padding +height – 水平滚动条高度。

scrollHeight >=clientHeight

从结果分析，IE8认为scrollHeight的最小高度是clientHeight。

offsetLeft = 元素border左上角到画布原点的距离 或 到offsetParent的border box顶部的距离。

IE7

注意：IE7中，滚动条的宽度是17个像素。

body

offsetHeight = body.padding + body.border+ body.height(CSS设置或内容撑大)；

clientHeight = body.height +body.padding – 水平滚动条高度；

scrollHeight = 内容margin box的高度；

documentElement

offsetHeight = clientHeight =window视窗可见高度;

scrollHeight = body.offsetHeight+ body.margin;

因此，只是获取窗口可见部分高度，在IE7中得用documentElement.clientHeight，获取整个页面内容的大小，则用documentElement.scrollHeight。

元素

offsetHeight = padding +border + height。

clientHeight = padding +height - scrollbar.width。

scrollHeight = padding + 内容margin box的高度

从结果分析，IE7认为scrollHeight 可以小于clientHeight。

offsetLeft = 元素border box左上角到父容器（不是offsetParent）的border box左上角的距离。

IE6

body

offsetHeight = body.padding +内容margin box的高度。

clientHeight = scrollHeight

documentElement

offsetHeight=画布高度，但offsetHeight>= clientHeight

clientHeight = window窗口可见高度。

scrollHeight = 内容的高度

因此，只是获取页面窗口的大小，在IE6中得用documentElement.clientHeight，获取整个页面内容的大小，则应该用documentElement.offsetHeight。

元素 offsetHeight = padding +border + height。

clientHeight = padding +height - scrollbar.width。

scrollHeight = padding + 内容margin box的高度

从结果分析，IE6认为scrollHeight 可以小于clientHeight。

offsetLeft = 元素border box左上角到父容器（不是offsetParent）的border box左上角的距离。

结论

IE6、IE7认为scrollHeight可以小于clientHeight;

IE8、IE9和Firefox认为scrollHeight>=clientHeight；

取窗口可见部分高度，统一用documentElement.clientHeight即可；

取页面内容的高度（如果内容高度比窗口高度小，取窗口高度），则用documentElement.scrollHeight，只有Chrome需要使用body.scrollHeight。

同理

clientWidth、offsetWidth 和scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment