css - 像 Firefox 一样的 CSS Scroll Snap 行为

Question

我在除 macOS 和 android 上的 firefox 之外的所有浏览器上都遇到了问题（尚未测试过 windows 和 ios），其中滚动捕捉被延迟。在 Firefox 上运行良好，但在 Edge、Chrome 和 Safari 上运行延迟。有什么解决办法吗？

我的代码：

.scroll-snap-container {
    height: 100vh;
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overflow-scrolling: touch; /* Needed to work on iOS Safari */
    overflow: auto;
}
.scroll-snap-container > div {
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
}
p {
  background-color: #000a;
  color: white;
  position: absolute;
}
img {
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

<div class="scroll-snap-container">
    <div>
        <p>Long text here.</p>
        <img src="https://placeimg.com/640/480/any/sepia"/>
    </div>
    <div>
        <p>Long text here.</p>
        <img src="https://placeimg.com/641/480/any/sepia"/>
    </div>
    <div>
        <p>Long text here.</p>
        <img src="https://placeimg.com/642/480/any/sepia"/>
    </div>
</div>

编辑：添加了 html 片段

标签： cssscroll-snap-pointsscroll-snapscroll-snap-type