Scroll-Padding - CSS-Tricks

Anonim

scroll-paddingist 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-paddingist eine optionale Eigenschaft für jeden Scroll-Snapping-Container. Scroll-Snapping-Container werden immer dann definiert, wenn die scroll-snap-typeEigenschaft auf einen anderen Wert gesetzt wird none. Weitere Informationen zu Scroll-Snapping-Containern finden Sie im scroll-snap-typeAlmanach-Eintrag.

OK, fahren Sie mit dem Scrollen fort

scroll-paddingwird verwendet, um den optimalen Betrachtungsbereich des Fangcontainers anzupassen. Dies ist nützlich, wenn der Container Elemente wie einen festen Header enthält, der Elemente im Inneren verdeckt, oder wenn der scrollbare Container etwas Platz benötigt, um den inneren Elementen Raum zum Atmen zu geben, sobald sie in Position gebracht wurden.

Ein einfaches Beispiel wäre scroll-padding, einen festen Abstand 50pxoben und links vom Container zu erstellen :

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Die Bereiche in Pink zeigen das Scroll-Padding auf dem Scroll-Snapping-Container.

Syntax

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

Wichtiger Hinweis zu Langhand: Chrome unterstützt 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-padding akzeptiert die folgenden Werte:

  • autoÜberlässt die Auffüllung dem Browser / Benutzeragenten. Im Allgemeinen bedeutet dies einen Wert von 0px, kann jedoch ungleich Null sein, wenn der Benutzeragent entscheidet, dass ein anderer Wert besser geeignet ist.
  • ist ähnlich geschrieben paddingund andere Eigenschaften , wenn der Wert kann mit den Einheiten (definiert werden px, em, vh, etc.) oder als Prozentsatz des Behälters selbst.

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