Scroll-margin | CSS-Tricks

scroll-margin ist Teil des CSS Scroll Snap Module. Scroll Snapping bezieht sich auf das „Einsperren“ der Position des Viewports auf bestimmten Elementen auf der Seite, während das Fenster (oder ein scrollbarer Container) gescrollt wird. Stellen Sie sich einen Scroll-Snapping-Container wie einen Magneten auf einem Element vor, der an der Oberseite des Viewports haftet und das Scrollen der Seite genau dort erzwingt.

scroll-margin ist eine optionale Eigenschaft für ein Scroll-Snapping-Element innerhalb eines Scroll-Snapping-Containers. Weitere Informationen zu Scroll-Snapping-Containern finden Sie im Almanac-Eintrag zu scroll-snap-type.

Scroll-Margin eingeben

scroll-margin wird verwendet, um den Schnappbereich eines Elements anzupassen (die Box, die definiert, wo das Element einrasten soll). Das Hinzufügen von scroll-margin ist nützlich, wenn Sie einem Element Platz zum Rand des Containers geben müssen, wenn es eingerastet ist, ermöglicht aber Situationen, in denen jedes Element leicht unterschiedliche Abstände benötigt. Wenn alle Elemente die gleichen Abstandsbedürfnisse haben, sollten Sie stattdessen scroll-padding für den übergeordneten Container anstelle von scroll-margin verwenden, da dies den Abstand für alle Elemente innerhalb des Containers beeinflusst.

Ein einfaches Beispiel, bei dem scroll-margin einen Abstand von 50px um die Ober- und linke Seite eines Elements ermöglicht, sieht so aus:

.scroll-element {
  scroll-margin: 50px 0 0 50px;
}

Der pinke Bereich repräsentiert die `scroll-margin` auf diesem Element.

Syntax

/* Shorthand */
scroll-margin: <length>{1,4};

/* Longhands */
scroll-margin-top: <length>;
scroll-margin-right: <length>;
scroll-margin-bottom: <length>;
scroll-margin-left: <length>;

/* inline-specific and block-specific properties as well */
scroll-margin-block: <length>{1,2};
scroll-margin-inline: <length>{1,2};

Wichtiger Hinweis zu Longhands: Chrome (und möglicherweise andere Browser) unterstützen derzeit keine Longhand-Formate für die Eigenschaften scroll-padding und scroll-margin. Verwenden Sie das Kurzschreibungsformat für maximale Browserunterstützung. Weitere Details und den aktuellen Status finden Sie in diesem Issue im Chromium Bug Tracker.

Werte

scroll-margin akzeptiert den folgenden Längenwert <length>, der ähnlich wie margin und andere Eigenschaften geschrieben wird, bei denen der Wert mit Einheiten definiert werden kann (px, em, vh usw.). Weitere Informationen finden Sie im W3C Values and Units Module. Prozentangaben können gemäß Spezifikation nicht für scroll-margin verwendet werden.

Beispiel

Siehe den Pen scroll-padding example
von CSS-Tricks (@css-tricks) auf CodePen.

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