我希望我的部分占据整个页面,并且一旦用户向上或向下滚动,就会出现上一个/下一个部分。它在 Firefox 和 Chromium-Edge 上完美运行,但是当我在 Chrome 上测试它时,它总是跳过一个部分(从第 1 节到第 3 节,从第 3 节回到第 1 节)。我能做些什么来解决这个问题?
这是HTML:
<div class="page container">
<div class="section section1">
...
</div>
<div class="section section1">
...
</div>
<div class="section section2">
...
</div>
<div class="section section3">
...
</div>
</div>
这是CSS:
.container{
position: relative;
width: 100%;
height: 100vh;
overflow: auto;
/* Scroll Snap */
scroll-snap-type: y mandatory;
}
.section{
position: relative;
width: 100%;
height: 100%;
scroll-snap-align: start;
display: flex;
align-items: center;
justify-content: center;
}
如果有人想自己看,这里是网站:在 Firefox 和/或 Chrome 中打开以查看差异