在视口外创建div时，溢出滚动不起作用

Question

我正在构建全屏滑块。最后一张幻灯片应该具有水平滚动区域。我正在使用css转换（为了使动画更流畅）将div引入视口。

由于某些原因，除非您调整窗口大小，否则滚动条将无法工作。

我的猜测是，当在视口之外创建可滚动div时，Chrome不会渲染它（出于性能原因？）。

然后我想您调整大小时，整个东西都会被计算并重新绘制，然后再考虑进去。

这是一个说明我问题的JSFiddle。

http://fiddle.jshell.net/f3thbjqc/6/show/

这是一个说明我的问题的视频（当我扭动鼠标时，是我尝试向右滚动但未成功。然后重新调整大小，然后开始工作）。

我的设置：Mac os High Sierra。 Chrome 69.0.3497.100和Safari 11.0.1（13604.3.5）的行为均相同，firefox则不存在该错误

Answer 1

当我使用选项卡和内部的滑块时，物化框架也有类似的问题。问题是滑块不起作用，调整窗口大小后，它可以正常工作。

尝试在滑块处于可见状态时手动触发此事件

window.dispatchEvent(new Event('resize'));