我在除 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 片段