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

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

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

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="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341843771.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341850848.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341981083.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341944975.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915342067175.jpg?x-oss-process=image/resize,p_40"  class="lazy" 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

より深いダイビングについては、Google Web Fundamentals 'Guideを参照してください。

よくある質問

CSSスクロールスナップとは何ですか？
• 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）。

• モバイルサポート？

  はい、モバイルデバイスで完全に機能します。

以上がCSSでのスクロールスナップ：スクロールアクションの制御の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。