javascript - 在什么时候计算 scrollHeight

Question

我正在尝试让 css 过渡与我正在使用 Angular 7 开发的 Accordion 元素一起使用，以便在底部展开时使用。因为我自己不打算使用该元素，所以我使用 overflow-y: visible;以确保放置在里面的任何东西都能正确显示。

这意味着由于使用了溢出，我引用了 max-height而不是 height为了我的过渡。我已经看到它建议将此转换与溢出一起使用，我应该设置 max-height远远超过它永远需要的东西。

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

我可以用 setTimeout 做(而且确实有效)在 ngAfterViewInit() 内使用但是 scrollHeight直到大约 70 毫秒后才计算和定义(根据一些超时测试)，然而 textContent是不是马上就有了。

这让我开始思考，scrollHeight 是否有特定的意义？是计算出来的，有什么方法可以连接到该事件或其他任何东西吗？我不想依赖一个奇怪的任意时间值 setTimeout() .

只是一个概念问题，您认为您不需要任何代码或任何东西吗？谢谢大家

Answer 1

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

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

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

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

回调将在下一次重绘之前执行，您应该得到更新后的 scrollHeight。