javascript - 在什么时候计算 scrollHeight

我正在尝试使用我正在使用 Angular 7 开发的手风琴元素进行 css 转换，以便在底部扩展时。由于我自己不会使用该元素，因此我使用overflow-y: visible;它来确保放置在其中的任何内容都能正确显示。

这意味着由于使用溢出，我引用max-height而不是height我的转换。我已经看到它建议使用这种带有溢出的过渡，我应该将其设置max-height为远远超过它所需要的。

这很好，除了过渡将始终使用该值并且动画可能看起来很愚蠢，具体取决于其内容。为了解决这个问题，我想我可以等待元素被实例化，填充其内容，抓取它scrollHeight，然后将其设置为max-height.

setTimeout我可以用used within做（并且确实有效），ngAfterViewInit()但scrollHeight直到大约 70 毫秒后才计算和定义（根据一些超时测试），但textContent立即存在。

这让我开始思考，是否有某个时间点scrollHeight被计算出来，有没有办法挂钩那个事件或任何东西？我不想依赖一个奇怪的任意时间值setTimeout()。

只是一个概念问题，不认为你需要任何代码或任何东西？多谢你们

标签： javascriptangulartypescript

应用于 DOM 元素的更改不会立即应用，在单个执行周期中对 DOM 所做的所有更改都会收集并在一次重绘中应用。

因此，在尝试读取元素的更新尺寸之前，您需要等待重绘完成。

requestAnimationFrame是在每次重绘之前执行的方法，如果您这样编写代码

element.style.display = 'block';
requestAnimationFrame(() => console.log(element.scrollHeight));

回调将在下一次重绘之前执行，您应该获得更新后的滚动高度。