【css】scroll-snapプロパティー で気持ちいスクロールを

スクロールで特定の要素にピタッと止まるスクロールありますよね
実はjsではなくcssで実現できるそうです。

scroll-snapというプロパティーを使って表現します。

100vhの要素が二つ重なっている状態を作って

<div class="container">
  <section class="area">1</section>
  <section class="area">2</section>
</div>

それぞれにcssscroll-snap-align: start;を実装します。
そして親要素にoverflow:auto;``scroll-snap-type: y mandatory;を追加します。

<style>
.container {
  overflow: auto;
  scroll-snap-type: y mandatory;
  height: 100vh;
}
.area {
  scroll-snap-align: start;
  height: 100vh;
  background: yellow;
}
.long-height{
  height: 300vh;
    background: green;
}
</style>

動きはこのような感じになります。

See the Pen scroll-snap で気持ちいいスクロール by たまき こう (@ulqvhvox) on CodePen.

横にスクロールする時は

scroll-snap-type: x;

下のプロパティーは子要素に記入し、
ストップするプロパティーをどの位置にするかを設定できます。
centerにすると要素が画面の中央になるように調節できます。 d

scroll-snap-align: start;

おしまい