CSSでのスクロールスナップ：スクロールアクションの制御-CSSチュートリアル-php.cn

CSSでのスクロールスナップ：スクロールアクションの制御

Christopher Nolan

リリース： 2025-02-10 10:10:14

オリジナル

588 人が閲覧しました

CSSスクロールスナップ：スムーズなスクロールインターフェイスを簡単に作成します

Tiffanyの CSS Master、第2版からのこの抜粋は、最新のアプリのようなWebエクスペリエンスを構築するための強力なツールであるCSSスクロールスナップモジュールを探ります。スクロールスナップにより、スクロール動作を正確に制御できるようになり、多くの場合JavaScriptの必要性が排除されます。

Scroll Snap in CSS: Controlling Scroll Action

CSSスクロールスナップモジュールが進化しました。 Edge、Internet Explorer、Firefoxの古いバージョンなどのブラウザに実装された、古いバージョン（Scroll snap

ポイント）は、ピクセルベースのアプローチを使用しました。ただし、最新のブラウザ（Chrome 69、Safari 11）は、ボックスアライメントモデルを利用しています。これはここでの焦点です。「ポイント」に言及したり、またはscroll-snap-points-xプロパティを使用したりする時代遅れのチュートリアルに注意してください。 scroll-snap-points-y説明する簡単なスライドショーを構築しましょう。 HTMLは非常に簡単です：

追加のラッパーやJavaScriptは必要ありません！ CSSは重いリフティングを行います：

<div>
  <img src="https://img.php.cn/upload/article/000/000/000/173915341843771.jpg" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="https://img.php.cn/upload/article/000/000/000/173915341850848.jpg" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="https://img.php.cn/upload/article/000/000/000/173915341981083.jpg" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="https://img.php.cn/upload/article/000/000/000/173915341944975.jpg" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="https://img.php.cn/upload/article/000/000/000/173915342067175.jpg" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img></div>

ログイン後にコピー

* {
   box-sizing: border-box;
}

html, body {
    padding: 0; 
    margin: 0;
}

.slideshow {
  scroll-snap-type: x mandatory; /* Scroll axis and behavior */
  overflow-x: auto;              /* 'scroll' or 'auto' */
  display: flex;
  height: 100vh;
}

.slideshow img {
  width: 100vw;
  height: 100vh;
  scroll-snap-align: center;
}

ログイン後にコピー

必須のスナップで水平スクロールを定義します。

画像を水平に配置します。 scroll-snap-type: x mandatoryビューポート内の各画像の中心。display: flex scroll-snap-align: center

Scroll Snap in CSS: Controlling Scroll Action より深いダイビングについては、Google Web Fundamentals 'Guideを参照してください。

よくある質問

CSSスクロールスナップは、カルーセルやページインターフェイスに最適で、滑らかで制御されたスクロールを作成します。スクロール位置を管理し、特定のポイントにビューをスナップします。

通常のスクロールとどのように違いますか？
どのように実装しますか？
、
、または）および（例えば、scroll-snap-type、x mandatory、y mandatory）子要素について。both mandatory scroll-snap-align start endcenter
値？
、
、または軸を指定します。 scroll-snap-typeまたはスナップの厳格さを制御します。x y both mandatoryproximityブラウザのサポート？
最新のブラウザで広くサポートされていますが、更新を確認してください。
一般的なユースケース？画像カルーセル、ページレイアウト、セクションコンテンツ。
スクロール速度を制御しますか？直接ではなく、スナップポイント間の距離を調整することにより間接的に。
デバッグ？ブラウザ開発者ツールを使用します（例：ChromeのScroll Snap Highlighter）。
モバイルサポート？
はい、モバイルデバイスで完全に機能します。