没有滚动快照类型和-align的滚动快照/简单示例在Chrome / Firefox中不起作用/

问题描述 投票:0回答:1

[使用Chrome / Firefox,我为两张图片创建了一个容器(.container)(列出具有img类的项目)。我在容器上添加了滚动快照类型。我在带有img类的项目上添加了滚动对齐对齐。

我在这里想念什么?

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;
}
css scroll scroll-snap-points
1个回答
热门问题
推荐问题
最新问题