CSSのスクロールスナップの便利な使い方、実装の注意点を徹底解説

CSSのスクロールスナップが登場して早4年、現在ではほぼすべてのブラウザにサポートされ、採用しているWebサイトやスマホアプリも増えてきました。 CSSのスクロールスナップについて、基礎知識をはじめ、各プロパティの機能や使い方、スクロールスナップの実際の使用例、実装の注意点などを紹介します。 CSS Scroll Snap by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのスクロールスナップを使う理由 スクロールコンテナの基本 スクロール コンテナの注意点 CSSのスクロールスナップとは scroll-snap-stopの使い方 scroll-paddingの使い方 scroll-marginの使い方 CSSのスクロールスナップの使用例 block値とinline値について アク

[coliss]

CSSのスクロールスナップについて、各プロパティの機能や使い方、スクロールスナップの実際の使用例、実装の注意点など。

[arapro]

スライダー系のJSライブラリがこれのおかげで簡略化されそう

[parti_colored_tourmaline]

読み込みの遅い変なサイトを撲滅したい

[Shinwiki]

いちばん「効かない」とセットで検索されてるやつ

[jay-es]

スクロールスナップ

[ultimatebreak]

こんなんあったのか

[daizo1117]

“CSSのスクロールスナップ”

[kuracom]

これは知らなかった…細かい制御いらなければCSSだけでカルーセルできる