CSS scroll-padding egenskap

Definition and Usage

scroll-padding The attribute 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 The attribute is a shorthand attribute of the following attributes:

scroll-padding The value 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
  • avståndet till vänster och höger är 30px
  • Bottom distance is 60px

If the scroll-padding attribute has two values:

scroll-padding: 15px 30px;
  • Top and bottom distances are 15px
  • avståndet till vänster och höger är 30px

Om scroll-padding-egenskapen har ett värde:

scroll-padding: 10px;
  • avståndet på alla fyra håll är 10px

för att se scroll-padding egenskapen på föräldrelementet, effekten måste sättas in på scroll-snap-align egenskapen, och sätt in scroll-padding och scroll-snap-type egenskapen.

Observera:I följande exempel har alla sidor skrollmarginalen satt, men på grund av scroll-snap-align Sätt till "start" så ändras endast skuggmarginalen på toppen och påverkar skrollningsbeteendet.

Exempel

Exempel 1

Ställ in skrollmarginalen från kont容ern till fästpositionen till 20px:

div {
  scroll-padding: 20px;
}

Prova själv

Exempel 2: Bildbibliotek

scroll-padding Egenskapen kan användas i gallerier med fästbeteende för att pusha bilderna under den fasta elementet:

#container {
  scroll-padding: 30px 0 0 0;
}
Fast övre element
Beijing Dansare Wuhan Tulpan Hangzhou

Prova själv

Exempel 3: Ställ in skrollmarginalen på botten och höger sida

scroll-padding Egenskapen kan sättas på båda sidorna av kont容ern. Skrolla horisontellt och vertikalt till nästa element för att se effekten:

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





Prova själv

CSS-syntax

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

Egenskapsvärde

Värde Beskrivning
auto Standardvärde. Webbläsaren beräknar inramningen.
length

Ange med enheter som px, pt, cm för skrollmarginalen.

Negativa värden tillåts inte. Se vidare:CSS Enheter.
% Specificera skuggmarginal i procent av innehållselementets bredd.
initial Sätt denna egenskap till dess standardvärde. Se vidare initial.
inherit Följer från föräldrelementet för denna egenskap. Se vidare inherit.

Tekniska detaljer

Standardvärde: auto
Arv: Nej
Animationsskapande: Stöds inte. Se vidare:Animation relaterade egenskaper.
Version: CSS3
JavaScript-syntax: object.style.scrollPadding="20px"

Webbläsarstöd

Tal i tabellen representerar den första webbläsarversionen som helt stöder egenskapen.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Relaterade sidor

Referens:CSS scroll-padding-bottom egenskap

Referens:CSS scroll-padding-left egenskap

Referens:CSS scroll-padding-right egenskap

Referens:CSS scroll-padding-top egenskap

Referens:CSS scroll-snap-align egenskap

Referens:CSS scroll-snap-type egenskap