最近便利なCSSおれおれAdvent Calendar 2023 – 09 日目

時限性の自動スクロールはないんだけど、利用者がスクロールするときにちょうど良い箇所で止まってくれるようになります。

例

親に scroll-snap-type、子に scroll-snap-align を指定します。両方必要。

1
2
3
4
<div class="Carousel">
  <div class="Carousel-item">1</div>
  …
</div>
1
2
3
4
5
6
7
8
.Carousel {
  overflow: auto;
  scroll-snap-type: x mandatory;
}
 
.Carousel-item {
  scroll-snap-align: center;
}

おしまい

でもなんか途中でスクロール止まることもあるような。条件がよくわかんないけど。

参考