CSS scroll-padding-Eigenschaft

Definition and Usage

scroll-padding This property specifies the distance from the container to the吸附位置 of the child element.

This means that when you stop scrolling, the scroll will quickly adjust and stop at a specified distance from the container to the吸附位置 of the focus child element.

The吸附位置 refers to the fixed position of the child element in the container when the scrolling stops.

scroll-padding This property is a shorthand for the following properties:

scroll-padding The values of the property can be set in different ways:

If the scroll-padding property has four values:

scroll-padding: 15px 30px 60px 90px;
  • The distance from the top is 15px
  • The distance from the right is 30px
  • The distance from the bottom is 60px
  • The distance from the left is 90px

If the scroll-padding property has three values:

scroll-padding: 15px 30px 60px;
  • The distance from the top is 15px
  • Die Abstände links und rechts betragen 30px
  • The distance from the bottom is 60px

If the scroll-padding property has two values:

scroll-padding: 15px 30px;
  • The distance from the top and bottom is 15px
  • Die Abstände links und rechts betragen 30px

Wenn die scroll-padding-Eigenschaft einen Wert hat:

scroll-padding: 10px;
  • Der Abstand in alle vier Richtungen beträgt 10px

um scroll-padding Eigenschaft auf dem übergeordneten Element ein, um die Wirkung auf dem Kind-Element zu sehen scroll-snap-align Eigenschaft, und stellen Sie scroll-padding und scroll-snap-type Eigenschaft.

Hinweis:In den folgenden Beispielen sind alle vier Kanten mit dem Scroll-Innenabstand versehen, aber scroll-snap-align Setzen Sie "start", sodass nur der obere Rande der Scroll-Innenabstand den Scrollverhalten ändert.

Beispiel

Beispiel 1

Setzen Sie den Scroll-Innenabstand von der Box zur Haftposition auf 20px:

div {
  scroll-padding: 20px;
}

Versuchen Sie es selbst

Beispiel 2: Bildersammlung

scroll-padding Die Eigenschaft kann in Bildergalerien mit Haftverhalten verwendet werden, um Bilder unter den festen Elementen zu schieben:

#container {
  scroll-padding: 30px 0 0 0;
}
Feste Oberfläche
Peking Tänzer Wuhan Tulpe Hangzhou

Versuchen Sie es selbst

Beispiel 3: Einstellen der Scroll-Innenabstände für Boden und rechte Seite

scroll-padding Die Eigenschaft kann gleichzeitig am Boden und an der rechten Seite des Containers gesetzt werden. Scrollen Sie horizontal und vertikal zur nächsten Element, um die Wirkung zu sehen:

#container {
  scroll-padding: 0 10px 30px 0;
}





Versuchen Sie es selbst

CSS-Syntax

scroll-padding: auto|value|initial|inherit;

Eigenschaftswert

Wert Beschreibung
auto Standardwert. Der Browser berechnet den Innenabstand.
length

Geben Sie den Innenabstand der Scrollbewegung in Einheiten wie px, pt, cm an.

Negative Werte sind nicht erlaubt. Siehe:CSS-Einheiten.
% Geben Sie den Abstand relativ zur Breite des umschließenden Elements in Prozent an.
initial Setzen Sie diesen Wert auf seinen Standardwert. Siehe initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe inherit.

Technische Details

Standardwert: auto
Vererbung: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationsspezifische Eigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.scrollPadding="20px"

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Eigenschaft vollständig unterstützen.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Verwandte Seiten

Referenz:CSS scroll-padding-bottom-Eigenschaft

Referenz:CSS scroll-padding-left-Eigenschaft

Referenz:CSS scroll-padding-right-Eigenschaft

Referenz:CSS scroll-padding-top-Eigenschaft

Referenz:CSS scroll-snap-align-Eigenschaft

Referenz:CSS scroll-snap-type-Eigenschaft