scroll-snap

CSS

用途

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

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

HTML

<main>
    <section>1</section>
    <section>2</section>
</main>

CSS

main {
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    height: 100vh;
    overflow-y: auto;
}
section {
    scroll-snap-align: start;
    height: 100vh
}

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

scroll-snap-alignする子要素には高さを指定してください

scroll-snap-align

start / center / end の3種類から選べます

磁力をつぎ込みたい子要素に書くプロパティです

scroll-snap-stop

section {
    scroll-snap-stop: always;  // 勢いよくスナップしても次のスナップポイントで停止します
}

scroll-padding

section {
    scroll-padding: 50px 0 0 0;  // スナップポイントより上に50pxだけある部分で停止します
}
BACK