没有使用 scroll-snap-type 和 -align 的滚动捕捉 / 简单示例不起作用 Chrome/Firefox /

Question

使用 Chrome / Firefox，我为几张图片（带有 class img 的列表项）创建了一个容器 (.container)。我在容器上添加了 scroll-snap-type 。我在带有 class img 的项目上添加了 scroll-snap-align。

我在这里错过了什么？

HTML

<div class="container">
  <ul>
  <li class="img"><img src="https://picsum.photos/500"></li>
  <li class="img"><img src="https://picsum.photos/500"></li>
  <li class="img"><img src="https://picsum.photos/500"></li>
  <li class="img"><img src="https://picsum.photos/500"></li>
  <li class="img"><img src="https://picsum.photos/500"></li>
  <li class="img"><img src="https://picsum.photos/500"></li>
  </ul>
</div>

CSS

.img {
  margin: 10px 5px;
  scroll-snap-align: center;
  -webkit-overflow-scrolling: touch;
}

.container {
  display:  grid; 
  justify-content: center; 
  grid-gap: 10px;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

Answer 1

事实证明，scroll-snap-type 要求您为容器定义一个高度。我不确定如何解释为什么需要它，但是，定义 height 确实解决了这个问题。

.img {
  margin: 10px 5px;
  scroll-snap-align: center;
  -webkit-overflow-scrolling: touch;
}

.container {
  display:  grid; 
  justify-content: center; 
  grid-gap: 10px;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

没有使用 scroll-snap-type 和 -align 的滚动捕捉 / 简单示例不起作用 Chrome/Firefox /

No scroll snap with scroll-snap-type and -align / Simple Example not working Chrome/Firefox /

css

scroll

scroll-snap-points