css - 使用 Chrome 的 CSS 滚动捕捉

Question

我在我的 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>

标签： cssangularpolyfillsscroll-snap