CSS SCROLL SNAP · 098

CSS Scroll Snap Studio

横に動かして、スクロールの止まる位置を比べる。

01

LIVE SCROLL TEST

カードを動かして、停止位置を確認する

SCROLL IT YOURSELF
snap.local / galleryDRAG OR SWIPE

INTERACTIVE GALLERY

カードを横へ動かしてください。

自動再生なし
  1. 01 / 06Orbit
    Studies    NEW PERSPECTIVE
  2. 02 / 06Folded
    Light    VISUAL EXPERIMENT
  3. 03 / 06Shape
    Library    FORM & FUNCTION
  4. 04 / 06Color
    Notes    DESIGN JOURNAL
  5. 05 / 06Quiet
    Spaces    MADE TO EXPLORE
  6. 06 / 06After
    Hours    END OF THE SERIES
NEAREST ALIGNMENT01 · ずれ 0px

紫の線は選んだ揃え位置です。「吸着なし」では線に揃えず止まります。カードをドラッグ・スワイプするか、左右のボタンで動かしてください。

02

HOW IT WORKS

3つのCSSで停止位置を決める

01 / CONTAINER

吸着の強さを決める

scroll-snap-type をスクロールする要素に指定します。mandatory は吸着し、proximity は近さをブラウザーが判断します。

02 / ITEM

カードを揃える位置を決める

scroll-snap-align を各カードに指定します。このデモでは左端・中央・右端を切り替えます。

03 / SCROLLPORT

基準線を内側に移す

scroll-padding-inline をスクロールする要素に指定します。左右の値を変えると、吸着する基準位置が動きます。

「同じ位置に揃える」は、端のカードも選択した位置に置くため実際の余白を足します。「両端で止める」は余白を左右の設定値に抑え、先頭と末尾だけ別の scroll-snap-align を指定します。scroll-padding 自体はスクロール可能な範囲を増やしません。

参考：scroll-snap-type · scroll-snap-align · scroll-padding-inline