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

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

例

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

<div class="Carousel">
  <div class="Carousel-item">1</div>
  …
</div>

.Carousel {
  overflow: auto;
  scroll-snap-type: x mandatory;
}

.Carousel-item {
  scroll-snap-align: center;
}

おしまい

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

参考