イイダリョウのブログ。【CSS】scroll-snapでスナップ(引っかかり)のあるスクロールがまったくカン・タン・だ!2019-08-31【CSS】scroll-snapでスナップ(引っかかり)のあるスクロールがまったくカン・タン・だ!CSSスナップ(ひっかかり)のあるスクロールをするのに昔はJSを利用してましたが、CSSのscroll-snapだけでも実現できるようです。実際に作ってみたら、まったくカン・タン・だった。slideの中にpタグがいくつか入っている。slide:幅、高さ共に画面いっぱい。オーバーフローはスクロールあり。p:幅、高さ共に画面いっぱい。画面いっぱいにする設定はvhとvw。mandatory)縦スクロールにスナップ設定をしてみた。CodePen.HTMLコードは変更なし。start;}.slideにscroll-snap-typeプロパティを設定。pにscroll-snap-alignプロパティを設定。値はstartscroll-snap-typeの値の一つ目は方向でyは縦。mandatoryがあると途中で止まらずに必ず境界まで画面がスナップする。ない場合は境界に近いときだけスナップする。startを設定する。これで親要素のスナップ設定と紐づく。mandatory)今度は横方向にスナップしてみる。CodePen.スライドみたいな動き。noneを追加overflowのスクロールは横方向のみにしたいのでoverflow-xプロパティにする。flexについてはこちらを参照。※参考:flex-CSSリファレンスflexプロパティは、フレックスコンテナ内のアイテムの幅についてまとめて指定する際に使用します。値を、flexプロパティ一つでまとめて指定できるので便利です。最後のflex-basisについては下記の記事で触れた。flex-grow、flex-shrinkともに無効になる。scroll-snapの対応ブラウザscroll-snapはほとんどのブラウザで対応している。IEやEdgeはベンプレ-msが必要みたい。scroll-snapがなくても最初の例のようなスナップなしの動きになるだけなので、たいした影響はないかもしれない。etc最後にということで、スナップ機能はまったくカン・タンに実装できました!ストーリーテリング的なサイトとか、プレゼンのスライドを再現するのに良さそうです!HTMLがシンプルなのもいいですね。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。