offsetHeight / clientHeight / scrollHeight永远不会改变 [英] offsetHeight / clientHeight / scrollHeight never change

问题描述

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

I'm building a scrolling directive with Angular and see a strange behavior of element heights. They do not change on resize. I went down to the simplest plain JS, but the bug is still here. This fiddle illustrates it http://jsfiddle.net/Y8B86/1/. Try to resize the window and click contents several times and see the console.

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

This function is responsible for reading values. The only difference in Angular is that instead of document.getElementsByTagName i do element.children()[n] to get inner element. Also, the element does not respond to scrolling when window is small enough. ScrollTop does not change.

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

The question is why height is not updated after window reports resize?

推荐答案

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

I believe that the problem is that you're expecting scrollHeight, offsetHeight, and clientHeight to change based on the windows size which in fact this is not the case.

scrollHeight是元素内容高度的度量，包括因溢出而在屏幕上不可见的内容（参考）。

The scrollHeight is "a measurement of the height of an element's content including content not visible on the screen due to overflow" (reference).

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

The offsetHeight is "the height of the element including vertical padding and borders, in pixels, as an integer" (reference).

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

The clientHeight is "the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin"(reference).

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

All three of these are relative to the element for which they are called on. Since it doesn't seem like you have set a relative height for the elements, you will not see any change to their scrollHeight, offsetHeight, or clientHeight. In other words, the elements currently have fixed heights based on the content within them.

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

You can see this when you make the screen so small that the 'click me' goes across two lines, then your values change.

这篇关于offsetHeight / clientHeight / scrollHeight永远不会改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！