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

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

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

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

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

<div>
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341843771.jpg"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341850848.jpg"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341981083.jpg"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915341944975.jpg"  class="lazy" alt="Scroll Snap in CSS: Controlling Scroll Action " /></img><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173915342067175.jpg"  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ビューポート內(nèi)の各畫像の中心。display: flex scroll-snap-align: center

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

よくある質(zhì)問(wèn)

CSSスクロールスナップとは何ですか？
• CSSスクロールスナップは、カルーセルやページインターフェイスに最適で、滑らかで制御されたスクロールを作成します。スクロール位置を管理し、特定のポイントにビューをスナップします。
  通常のスクロールとどのように違いますか？
通常のスクロールは自由に流れています。スクロールスナップは、より予測(cè)可能なユーザーエクスペリエンスのために定義された停止ポイントを提供します。

• どのように実裝しますか？

コンテナ（例：
• 、

  、または）および（例えば、scroll-snap-type、x mandatory、y mandatory）子要素について。both mandatory scroll-snap-align start endcenter

  値？
??
• 、

  、または軸を指定します。 scroll-snap-typeまたはスナップの厳格さを制御します。x y both mandatoryproximityブラウザのサポート？

  最新のブラウザで広くサポートされていますが、更新を確認(rèn)してください。

• 一般的なユースケース？畫像カルーセル、ページレイアウト、セクションコンテンツ。

• スクロール速度を制御しますか？直接ではなく、スナップポイント間の距離を調(diào)整することにより間接的に。

• デバッグ？ブラウザ開(kāi)発者ツールを使用します（例：ChromeのScroll Snap Highlighter）。

• モバイルサポート？

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

以上がCSSでのスクロールスナップ：スクロールアクションの制御の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。