javascript - 在布局*之前*对窗口调整大小事件使用react

Question

考虑一下用漂亮的彩色图表描述的“像素管道” https://developers.google.com/web/fundamentals/performance/rendering/

我有一个元素(比如说一个跨度)，我想在浏览器窗口调整大小时调整它的大小。我这样做是使用 window.onresize/window.addEventListener('resize'

这有效，我调整了它的大小以适应可用空间。伟大的。但问题是，在我调整窗口大小后的一小段时间(突然调整大小，例如从全屏“恢复”到 30% 高度)，会显示一个滚动条。我相信它只是显示，因为管道在运行我的 onresize 代码之前，对窗口大小的变化做出了 react ，经历了一次布局、绘制和合成阶段，尽管什么也没有除了窗口在该周期内改变大小之外，足以使滚动条出现。在下一个周期，我减小了跨度的大小以适应窗口，并且滚动条消失了。

对于一个跨度的人为示例，我确信我可以使用指定边距的样式或类似的东西来解决问题，但对于我更一般的问题，我确实想使用 JavaScript 来进行调整。

谢谢。

Answer 1

我很确定你可以通过在 paret 容器上定义 css 来避免这些滚动条..这是一个猜测，但我认为在你的情况下这是 html 或 body

html, body {
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}