Question

我遇到了scrollHeight和offsetHeight的问题，我怀疑它是滥用css渲染引擎的产物。

我试图在以下上下文中为元素获取准确的scrollHeight或offsetHeight。

CSS

.transitionHeight {
overflow: hidden;
transition: height 1s;
}

.closed {
  height: 0 !important;
  overflow: hidden;
  padding: 0 !important; 
  border: none !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;  
  width: .1rem; 
}

HTML（摘要）

<div class="fullHeight closed" id="addressTarget" style="height: 1119px;">
  <div class="widget bar contact" id="addressDetails">
    <div class="column left">
      Header:
    </div>
    <p class="column right">Information</p>
    <div class="column left">
      Header 2:
    </div>
    <a href="" class="column right">
      More Details
    </a>
    <div class="column left">
      Like us on Facebook at:
    </div>
    <a href="" target="_blank" class="column right">
      Even More Details
    </a>
  </div>
</div>

对{＃1}}和document.querySelector("#addressDetails").clientHeight的调用都会在将闭合样式应用于#addressTarget时返回一个看似随机的整数，当#addressTarget没有附加关闭样式时，调用返回一个准确的值。理想情况下，代码应该能够在应用样式时计算正确的高度以避免FOUC，是否有办法获得此值？

这里的目标是将document.querySelector（“＃addressTarget”）。style.height设置为高度检查返回的值，以创建可靠的向下滑动。如果javascript调用无法返回所需的高度，那么是否有一个可以应用于.heightTransition的css规则，它将a）表示转换目标并且b）正确计算？

（虽然.column .left和.right的确切定义不是解决这个问题的必要条件，但我将它们包含在这里以防万一它们是有用的，但是我能把它们拉出来的最好的地方是原来的.scss所以我用sass而不是css提供它们：

document.querySelector("#addressDetails").offsetHeight

获取高度为0的容器隐藏元素的高度

0 个答案: