Scroll-padding | CSS-Tricks

scroll-padding ist Teil des CSS Scroll Snap Module. Scroll-Snapping bezieht sich auf das "Sperren" der Position des Viewports auf bestimmten Elementen der Seite, während das Fenster (oder ein scrollbarer Container) gescrollt wird. Stellen Sie sich einen Scroll-Snapping-Container wie einen Magneten vor, der auf einem Element sitzt, das am oberen Rand des Viewports haftet und die Seite zwingt, genau dort anzuhalten.

scroll-padding ist eine optionale Eigenschaft für jeden Scroll-Snapping-Container. Scroll-Snapping-Container werden definiert, wenn die Eigenschaft scroll-snap-type auf einen anderen Wert als none gesetzt ist. Weitere Informationen zu Scroll-Snapping-Containern finden Sie im Almanac-Eintrag zu scroll-snap-type.

OK, dann weiter zu scroll-padding

scroll-padding wird verwendet, um den optimalen Anzeigebereich des Snapping-Containers anzupassen. Dies ist nützlich, wenn der Container Elemente wie eine feste Kopfzeile hat, die Elemente im Inneren verdecken würde, oder wenn der scrollbare Container etwas Platz benötigt, um den inneren Elementen Raum zum Atmen zu geben, sobald sie in Position "gesnappt" wurden.

Ein einfaches Beispiel wäre die Verwendung von scroll-padding, um einen festen Abstand von 50px oben und links im Container zu schaffen.

.scroll-container {
  scroll-padding: 50px 0 0 50px;
}

A diagram with 2 boxes, one is the element container with a pink background and 50 pixels of spacing on the top and the left hand sides of the container. The second box is the element itself in dark gray sitting against the bottom left edge of the container. — Die Bereiche in Pink zeigen das Scroll-Padding auf dem Scroll-Snapping-Container.

Syntax

/* Shorthand */
scroll-padding: [ <length-percentage> | auto ]{1,4};

/* Longhands */
scroll-padding-top: <length-percentage> | auto;
scroll-padding-right: <length-percentage> | auto;
scroll-padding-bottom: <length-percentage> | auto;
scroll-padding-left: <length-percentage> | auto;

/* inline-specific and block-specific properties as well */
scroll-padding-block: [ <length-percentage> | auto ]{1,2};
scroll-padding-inline: [ <length-percentage> | auto ]{1,2};

Wichtiger Hinweis zu Longhands: Chrome unterstützt derzeit keine Longhand-Formate für die Eigenschaften scroll-padding und scroll-margin. Verwenden Sie die Kurzschreibweise für maximale Browserunterstützung. Weitere Details und den aktuellen Status finden Sie in diesem Issue im Chromium Bug Tracker.

Werte

scroll-padding akzeptiert die folgenden Werte

auto lässt das Padding vom Browser/User-Agent bestimmen. Im Allgemeinen bedeutet dies einen Wert von 0px, kann aber auch größer als Null sein, wenn der User-Agent entscheidet, dass ein anderer Wert angemessener ist.
<length-percentage> wird ähnlich wie padding und andere Eigenschaften geschrieben, wobei der Wert mit Einheiten (px, em, vh usw.) oder als Prozentsatz des Containers selbst definiert werden kann.

Beispiel

Sehen Sie sich den Pen scroll-padding example
von CSS-Tricks (@css-tricks) auf CodePen an.

Browser-Unterstützung

Diese Daten zur Browserunterstützung stammen von Caniuse, das weitere Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrome	Firefox	IE	Edge	Safari
69	68	11*	79	11

Mobil / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
127	127	127	11.0-11.2