我在我的 Angular 应用程序中使用 CSS scroll-snap 从第 1 部分滚动到第 2 部分等。它在 Firefox 中工作得非常好,但在 Chrome 中却不行。在 Chrome 中它跳得太远并且总是跳过一个部分(当使用鼠标滚动时,使用触摸板它可以按预期工作)。
到目前为止,我已经弄清楚这是因为容器元素已position: absolute
设置。这是必需的。
这是我的Codepen
.container {
position: absolute;
z-index: 99999999999999999;
overflow: auto;
-ms-overflow-style: none !important;
scrollbar-width: none !important;
overflow-y: scroll;
height: 530px;
scroll-snap-type: y mandatory;
width: 100%;
left: 0;
}
.section {
height: 500px;
scroll-snap-align: center;
box-sizing: border-box;
}
<div class="container">
<div class="section">1</div>
<div class="section">2</div>
<div class="section">3</div>
<div class="section">4</div>
<div class="section">5</div>
</div>