javascript - Firefox scrollHeight vs溢出

Question

演示

HTML：

<div id="relative">
  <div id="absolute"></div>
</div>

CSS：

#relative {
  position : relative;
  width    : 200px;
  height   : 200px;
  overflow : visible;
}
#absolute {
  position   : absolute;
  width      : 200px;
  height     : 300px;
  background : #eee;
}

JavaScript：

console.log($("#relative").get(0).scrollHeight);
$("#relative").css({
  "overflow-x" : "hidden",
  "overflow-y" : "scroll"
});
console.log($("#relative").get(0).scrollHeight);

它在 chrome 中返回“300, 300”，在 Firefox 中返回 9, “200, 300”。

有没有办法在不改变溢出的情况下检测“300”？

Answer 1

No scrollbars = no scrollHeight.

When an element's content does not generate a vertical scrollbar, then its scrollHeight property is equal to its clientHeight property.

https://developer.mozilla.org/en-US/docs/DOM/element.scrollHeight