offsetHeight/clientHeight/scrollHeight永远不会改变

Question

我正在使用Angular构建一个滚动指令,并看到元素高度的奇怪行为.它们在调整大小时不会改变.我去了最简单的普通JS,但这个bug还在这里.这个小提琴说明了它http://jsfiddle.net/Y8B86/1/.尝试调整窗口大小并多次单击内容并查看控制台.

function rebuild() {
    var transcluded = document.getElementsByTagName('div')[0];
    scope.scrollHeight = transcluded.scrollHeight;
    scope.offsetHeight = transcluded.offsetHeight;
    scope.clientHeight = transcluded.clientHeight;
}

该函数负责读取值.Angular的唯一区别在于,而不是document.getElementsByTagName我做element.children()[n]内部元素.此外,当窗口足够小时,元素不响应滚动.ScrollTop不会改变.

问题是窗口报告调整大小后为什么height没有更新？

Answer 1

我相信问题是你期望scrollHeight,offsetHeight和clientHeight根据窗口大小进行更改,实际上情况并非如此.

scrollHeight是"元素内容高度的度量,包括由于溢出而在屏幕上不可见的内容"(参考).

offsetHeight是"元素的高度,包括垂直填充和边框,以像素为单位,作为整数"(参考).

clientHeight是"以像素为单位的元素的内部高度,包括填充,但不包括水平滚动条高度,边框或边距"(参考).

所有这三个都与它们被调用的元素相关.由于您似乎没有为元素设置相对高度,因此您不会看到对其scrollHeight,offsetHeight或clientHeight的任何更改.换句话说,元素当前具有基于其内容的固定高度.

当你使屏幕变得如此之小以至于"点击我"跨过两行时,你可以看到这一点,然后你的值会发生变化.