Scroll einschnappen Sie CSS: Steuern von Scroll -Aktionen

CSS Scroll Snap: Erstellen Sie mühelos glatte Scroll -Schnittstellen

Dieser Auszug aus Tiffanys CSS Master, 2. Auflage , untersucht das CSS Scroll Snap-Modul, ein leistungsstarkes Tool zum Erstellen moderner, app-ähnlicher Web-Erlebnisse. Scroll Snap ermöglicht eine präzise Kontrolle über das Scrolling -Verhalten und beseitigt in vielen Fällen die Notwendigkeit von JavaScript.

Das CSS -Scroll -Snap -Modul hat sich weiterentwickelt. Ältere Versionen (Scroll Snap Punkte ), die in Browsern wie älteren Versionen von Edge, Internet Explorer und Firefox implementiert sind, verwendeten einen pixelbasierten Ansatz. Moderne Browser (Chrome 69, Safari 11) verwenden jedoch ein Box -Ausrichtungsmodell, was hier im Mittelpunkt steht. Vorsicht von veralteten Tutorials, die "Punkte" erwähnen oder scroll-snap-points-x oder scroll-snap-points-y Eigenschaften verwenden.

Erstellen wir eine einfache Diashow, um zu veranschaulichen. Die HTML ist bemerkenswert einfach:

<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>

Es werden keine zusätzlichen Verpackungen oder JavaScript benötigt! Das CSS macht das schwere Heben:

* {
   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 definiert das horizontale Scrollen mit obligatorischem Schnappschuss. display: flex ordnet Bilder horizontal an. scroll-snap-align: center Zentren jedes Bild im Ansichtsfenster.

Für einen tieferen Tauchgang wenden Sie sich an Google Web Fundamentals 'Guide, "gut kontrolliertes Scrolling mit CSS Scroll Snap."

häufig gestellte Fragen

• Was ist CSS Scroll Snap? Es verwaltet Scrollpositionen und schnappt die Ansicht zu bestimmten Punkten.

• Wie unterscheidet es sich vom normalen Scrollen? Scroll Snap bietet definierte Stopppunkte für ein vorhersehbareres Benutzererlebnis.

• Wie implementiere ich es? 🎜>,

  ) auf den Kinderelementen. scroll-snap-type x mandatory y mandatory both mandatory Werte? scroll-snap-align start, end oder center Geben Sie die Achse an;

  oder
steuern

• scroll-snap-type Browser -Unterstützung? x y both Häufige Anwendungsfälle?

• Steuern von Scroll -Geschwindigkeit?

• Debugging?
  Mobile Unterstützung?
Ja, voll funktionsfähig auf mobilen Geräten.

Das obige ist der detaillierte Inhalt vonScroll einschnappen Sie CSS: Steuern von Scroll -Aktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!