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不会改变。

问题是窗口报告调整大小后<{1}}未更新的原因？

Answer 1

我认为问题在于您希望scrollHeight，offsetHeight和clientHeight根据窗口大小进行更改，实际情况并非如此。

scrollHeight是“元素内容高度的度量，包括由于溢出而在屏幕上不可见的内容”（reference）。

offsetHeight是“元素的高度，包括垂直填充和边框，以像素为单位，为整数”（reference）。

clientHeight是“以像素为单位的元素的内部高度，包括填充，但不包括水平滚动条的高度，边框或边距”（reference）。

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

当您将屏幕设置得太小以至于“点击我”跨越两行时，您就可以看到这一点，然后您的值会发生变化。

Answer 2

您可以将其插入指令中的链接功能

angular.element($window).bind('resize', function () {
   rebuild();
});

确保将$window注入指令函数，并且只需调用rebuild或其他函数。当然，你也应该将transcluded改为适当的angularJS形式。

offsetHeight / clientHeight / scrollHeight永远不会改变

2 个答案: