CSS scroll-padding eigenschap

Definition and Usage

scroll-padding This attribute specifies the distance from the container to the child element's吸附位置.

This means that when you stop scrolling, the scroll will quickly adjust and stop at the 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 attribute of the following properties:

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

If the scroll-padding attribute has four values:

scroll-padding: 15px 30px 60px 90px;
  • Top distance is 15px
  • Right distance is 30px
  • Bottom distance is 60px
  • Left distance is 90px

If the scroll-padding attribute has three values:

scroll-padding: 15px 30px 60px;
  • Top distance is 15px
  • de afstand aan de linkerkant en de rechterkant is 30px
  • Bottom distance is 60px

If the scroll-padding attribute has two values:

scroll-padding: 15px 30px;
  • Top and bottom distances are 15px
  • de afstand aan de linkerkant en de rechterkant is 30px

Als de scroll-padding-eigenschap een waarde heeft:

scroll-padding: 10px;
  • de afstand in alle vier richtingen is 10px

om te zien scroll-padding eigenschap in op de ouderlijke element, dan moet de scroll-snap-align eigenschap, en stel de scroll-padding en scroll-snap-type eigenschap.

let op:In het volgende voorbeeld zijn alle kanten van de scroll-inbuismarge ingesteld, maar vanwege scroll-snap-align Stel het in op "start", dus alleen de scroll-inbuismarge aan de bovenkant verandert het scrollgedrag.

voorbeeld

voorbeeld 1

Stel de scroll-inbuismarge van het container naar de hechting in op 20px:

div {
  scroll-padding: 20px;
}

probeer het zelf

voorbeeld 2: afbeeldingsbibliotheek

scroll-padding De eigenschap kan worden gebruikt in een galerij met hechting om de afbeeldingen naar beneden te duwen onder het vaste element:

#container {
  scroll-padding: 30px 0 0 0;
}
vaste top-elementen
Beijing Dancer Wuhan Tulip Hangzhou

probeer het zelf

voorbeeld 3: instellen van de scroll-inbuismarge aan de onderkant en de rechterkant

scroll-padding De eigenschap kan tegelijkertijd worden ingesteld aan de onderkant en de rechterkant van het container. Scroll horizontaal en verticaal naar het volgende element om het effect te zien:

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





probeer het zelf

CSS syntax

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

eigenschapswaarde

waarde beschrijving
auto standaardwaarde. De browser berekent de inbuismarge.
length

Specificeer de scroll-inbuismarge in eenheid van px, pt, cm, etc.

Negatieve waarden zijn niet toegestaan. Raadpleeg:CSS Units.
% Specificeer de procentuele binnenmarge ten opzichte van de breedte van de opslagelement.
initial Stel deze eigenschap in op de standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap wordt geërfd van de ouderlijke element. Raadpleeg inherit.

technische details

standaardwaarde: auto
inheritantie: nee
animatie maken: niet ondersteund. Raadpleeg:animatiegerelateerde eigenschappen.
versie: CSS3
JavaScript syntax: object.style.scrollPadding="20px"

browserondersteuning

De cijfers in de tabel geven de browserversie aan die de eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

gerelateerde pagina's

bron:CSS scroll-padding-bottom eigenschap

bron:CSS scroll-padding-left eigenschap

bron:CSS scroll-padding-right eigenschap

bron:CSS scroll-padding-top eigenschap

bron:CSS scroll-snap-align eigenschap

bron:CSS scroll-snap-type eigenschap