IEがお役目を終えるということで、CSSでスクロールスナップが使用できるようになります。
これを使用すると、CSS数行で簡易的なカルーセルを実装できるようになります。
特にスマートフォンなどのタッチデバイスではJSでの実装とほとんど変わらないような操作感を実現できます。
＜JSを使用しないスクロール例＞
スクロールスナップさせる
スクロールをスナップさせるには、scroll-snap-typeとscroll-snap-alignを使用します。|
1 2 3 4 5 6 |
.wrap{ scroll-snap-type: x mandatory; } .wrap .child{ scroll-snap-align: start; } |
なんとこれだけで、子要素の横スクロールのスナップが可能になります。
scroll-snap-type の値、「x」で水平軸を指定し、「mandatory」でスナップをするように指定しています。
scroll-snap-align の値、「start」でスナップする基準点を指定します。
あとはカルーセルになるように、CSSで装飾するだけです。
実装例
＜HTML＞HTMLは、親要素、子要素、孫要素と用意します。孫要素のdivがカルーセルの1コマ分になります。
|
1 2 3 4 5 6 7 8 9 |
<div class="wrap"> <section> <div class="child">01</div> <div class="child">02</div> <div class="child">03</div> <div class="child">04</div> <div class="child">05</div> </section> </div> |
＜CSS＞
CSSには、レイアウトを記述します。
.wrap に scroll-snap-type: x mandatory; を、.child にscroll-snap-align: start;を適用します。
height や background の値は適宜調整してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.wrap{ display: block; width: 100vw; height: 50vh; overflow-x: scroll; scroll-snap-type: x mandatory; } section{ display: flex; flex-flow: row nowrap; width: calc(100vw * 5); height: 50vh; } section div.child:nth-child(odd){ background: #dbb3bc; } section div.child:nth-child(even){ background: #b46d8b; } section .child{ display: block; width: 100vw; height: 50vh; scroll-snap-align: start; } |
