scroll-snap

用途

・縦にスクロールスナップを使って、セクションの区切りを明確にする

・横にスクロールスナップを使って、カルーセル（スライド）のユーザビリティを上げる

注意点

・縦にスクロールスナップを使う場合、レスポンシブ対応が面倒

HTML

<div class='container'>
    <section>1</section>
    <section>2</section>
</div>

CSS

.container {
    scroll-snap-type: y mandatory;
    height: calc( 100vh - 50px );
    overflow: scroll;  // or auto
}
section {
    scroll-snap-align: start;
    height: calc( 100vh - 50px );
}

scroll-snap-alignは磁力をつぎ込みたい子要素だけに書けばいいです。

スクロールスナップが効かない場合

scroll-snap-alignする子要素には高さを指定する必要があります。