Bildlaufrand - CSS-Tricks

Anonim

scroll-marginist Teil des CSS Scroll Snap-Moduls. Scroll-Snapping bezieht sich auf das „Sperren“ der Position des Ansichtsfensters für bestimmte Elemente auf der Seite, während das Fenster (oder ein scrollbarer Container) gescrollt wird. Stellen Sie sich einen Scroll-Snapping-Container vor, als würden Sie einen Magneten auf ein Element legen, das oben im Ansichtsfenster haftet und die Seite zwingt, genau dort nicht mehr zu scrollen.

scroll-marginist eine optionale Eigenschaft für ein Scroll-Snapping-Element in einem Scroll-Snapping-Container. Weitere Informationen zu Scroll-Snapping-Containern finden Sie im scroll-snap-typeAlmanach-Eintrag.

Bildlaufrand eingeben

scroll-marginwird verwendet, um den Fangbereich eines Elements anzupassen (das Feld, das definiert, wo das Element gefangen werden soll). Das Hinzufügen scroll-marginist nützlich, wenn Sie einem Element beim Einrasten Platz am Rand des Containers geben müssen, aber Situationen berücksichtigen müssen, in denen jedes Element möglicherweise einen geringfügig anderen Abstand benötigt. Wenn für alle Elemente dieselben Abstandsanforderungen gelten, sollten Sie die Verwendung scroll-paddingfür den übergeordneten Container in Betracht ziehen, scroll-marginda dies den Abstand für alle Elemente im Container beeinflusst.

Ein einfaches Beispiel, bei dem scroll-marginein Abstand von 50 Pixel oben und links von einem Element zulässig ist, sieht folgendermaßen aus:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
Der rosa Bereich repräsentiert das scroll-marginauf diesem Element.

Syntax

/* Shorthand */ scroll-margin: (1,4); /* Longhands */ scroll-margin-top: ; scroll-margin-right: ; scroll-margin-bottom: ; scroll-margin-left: ; /* inline-specific and block-specific properties as well */ scroll-margin-block: (1,2); scroll-margin-inline: (1,2);

Wichtiger Hinweis zu Langhand: Chrome (und möglicherweise andere Browser) unterstützen derzeit kein Langhandformat scroll-paddingund keine scroll-marginEigenschaften. Verwenden Sie die Kurzform für maximale Browserunterstützung. Weitere Informationen und den aktuellen Status finden Sie in diesem Problem im Chrom-Bug-Tracker.

Werte

scroll-marginakzeptiert die folgenden ein Längenwert, der auf ähnliche geschrieben wird marginund andere Eigenschaften , bei denen der Wert mit Einheiten definiert werden ( px, em, vh, usw.). Weitere Informationen finden Sie im W3C-Modul für Werte und Einheiten. Prozentsätze können nicht scroll-margingemäß der Spezifikation verwendet werden.

Beispiel

Siehe das Beispiel
für das Auffüllen von Stiften durch CSS-Tricks (@ css-Tricks) auf CodePen.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
69 68 11 * 79 11

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 11.0-11.2

verbunden

  • scroll-snap-type
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Ressourcen

  • Empfehlung für CSS Scroll Snap W3C-Kandidaten
  • Praktisches CSS-Scroll-Snapping
  • Einführung in CSS Scroll Snap Points