それらは横スクロール時にスナップされる。 ただし火狐は居場所を示さない（横スクロール、overflow-x: scroll、scroll-snap-type、scroll-snap-align）
今の会社では、レスポンシブでPCからスマホなどのモバイルにデザインが切り替わる際、レイアウト等の裁量はコーダーさんに任されています。
PC画面上で横並びになっている要素をタブレットやスマホで見せる際、私なんかは縦に1～2列並べる傾向があるわけですが、流石に数か月同じことをしていると「縦にズラズラ並ぶのをスクロールしていくのって芸がないよね？」と思いまして、JQの「slick」みたいに横にスクロールできると面白そうだと思って先人の足跡を検索してみました。
そうすると「overflow-x: scroll;」「scroll-snap-type」「scroll-snap-align」を使うことで、JQ無しでもやっていけるいい時代になっているとのこと。自分でもいろいろ試してみました。
今回はスマホ幅になった際に「display:flex;」で横並びにした子要素を親要素内で横スクロールさせる試みです。
〇PC画面
親要素 {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
・特に捻りもなく、上から横並び/均等配置/複数行OKにしてます。
子要素 {
width: 30%;
}
・親要素に対して幅30％で表示。３つ並んで段落ちする感じで
〇モバイル画面
親要素 {
overflow-x: scroll;
scroll-snap-type: x mandatory;
flex-wrap:nowrap;
}
・上から、
親要素内に収まらない分を横方向にスクロールして見せる/
スクロールの際、横方向にスナップ/
複数行OKだったのを、1行内に収めるように変更
子要素 {
min-width: 100%;
scroll-snap-align:center;
}
・上から、
親要素に対して最小幅を100％/
スナップする際の基準を子要素の左側/
単純に横スクロールさせるだけなら「overflow-x: scroll;」だけでOKなのですが、このままだと子要素が画面上の半端な位置で止まってしまいます。そこで「scroll-snap-type」を使ってピタリと停まる様にします。
子要素の方では、「scroll-snap-type」でピタリと停める際、どこを基準に停めるかを「scroll-snap-align」で指定してあげます。これがないとピタッと停まりません。
基準は要素の両端（start/end）と中央（center）になります。PC画面の際に親要素で「justify-content: space-around;」にしている都合で、ここは「start」にします。「center」にすると最初の子要素が半分見切れた状態で表示されてしまうためです。
あとは子要素の横幅ですが、これは「min-width」でないと上手いこと機能しませんでした。
最初は「flex-basic」で横幅を設定していましたが、スマホの狭い画面上で一列に並ぶばかりで埒があきません。「width」でもだめで「min-width」で漸く求める状態になりました。ここを33％にしたら3つ並んで表示になります。
これでスマホ画面で横スクロール＆子要素がスナップする状態が出来上がります。ただし、このままでは初見の人には横スクロールする要素か否か判別がつきません。最悪、スルーされてしまいます。
一番簡単なのは親要素にスクロールバーを追加することです。ここでは以下を親要素に追加します。
親要素::-webkit-scrollbar {
height:10px;
}
親要素::-webkit-scrollbar-track{
background:#dddddd;
}
親要素::-webkit-scrollbar-thumb{
background:#2cc2e4;
}
・上から、バーの太さ/バーの背景色/バーの色です。
これで「この要素は横にスクロールする」ことと、「どれ位の要素がある/どの位置の要素が表示されている」のかおおよそ見当がつきます。
……ただし、これはChromeではいいのですが、FireFoxではスクロールバーは常時表示はされない仕様なので、有効ではありません。画面にタッチ/スクロールした際には出てきますが、スクロール後一定時間で非表示になってしまいます（ついでにバーの装飾も効かないのでそっけない横棒です）。
この為、初見ユーザーへの配慮を考えると………
「画面左右にスクロールを促す目印を配置する」
「最初の子要素で横スクロールする旨を明示する」
………などを考慮する必要があります。JQで横スクロール量を見て要素のある方向に矢印を出すのなんかが無難そうですが、そも「JQ使わなくてもいい感じにできる！」というのが発端なのががが……。
便利ではありますがユーザーへの配慮が必要なので、その辺をどうクリアしていくかが課題だと思いました。