CSS scroll-padding-block egenskap

Definition och användning

scroll-padding-block Egenskapen specificerar avståndet från behållaren till fästplatsen för underelementet i blockriktningen.

Detta innebär att när du stoppar med att rulla, justeras rullen snabbt och stoppar på den angivna avståndet mellan fästplatsen och behållaren i blockriktningen.

Blockriktningen är riktningen för att placera nästa rad i förhållande till den nuvarande radpositionen, detta är också sättet som etiketter med CSS display: block; (t.ex. <p>- och <div>-etiketter) är layoutade på sidan. Blockriktningen beror på skrivspråk, till exempel är nya rader i mongoliska ordnade från vänster till höger, så blockriktningen är också från vänster till höger, medan engelska sidor har en nedåtgående blockriktning. Blockriktningen kan specificeras med CSS-egenskapen writing-mode definiera.

Anslutningspositionen är den plats där underelementet fäster i behållaren när du stoppar med att rulla.

Observera:Denna egenskap är endast i blockriktningen,scroll-snap-align Gäller när egenskapen sätts till 'start' eller 'end'.

scroll-padding-block Egenskapen är en förkortning av följande egenskaper:

• scroll-padding-block-start
• scroll-padding-block-end

scroll-padding-block Värdet på egenskapen kan sättas på olika sätt:

Om scroll-padding-block-egenskapen har två värden:

scroll-padding-block: 10px 50px;

• Avståndet från början är 10px
• Avståndet från slutet är 50px

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

scroll-padding-block: 10px;

• Avståndet från början och slutet är 10px

För att se scroll-padding-block Effekten av egenskapen måste sättas på underelementen scroll-snap-align scroll-snap-align scroll-padding-block och egenskapen, och sätt scroll-snap-type

CSS-egenskapen scroll-padding-block och scroll-padding-inline egenskapen är liknande till CSS-egenskapen CSS scroll-padding-top egenskap,scroll-padding-bottom,scroll-padding-left och scroll-padding-right är mycket lika, men scroll-padding-block och scroll-padding-inline Egenskapen är beroende av blockriktning och inre riktning.

Exempel

Exempel 1

Sätt inre rullmarginalen i blockriktningen till 20px från behållaren till fast positionen:

div {
  scroll-padding-block: 20px;
}

Prova själv

Exempel 2: Bildbibliotek

scroll-padding-block Egenskapen kan användas för bildgallerier med fastklistringsbeteende för att pusha bilderna under en fast element:

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

Prova själv

Exempel 3

När behållarelementets writing-mode När egenskapsvärdet sätts till vertical-rl, flyttas början på behållaren och dess underliggande element från toppen till höger och slutet från botten till vänster i blockriktningen. Detta påverkar fastklistringsbeteendet samt scroll-padding-block Hur egenskapen fungerar:

#container {
  scroll-padding-block: 20px 0;
  writing-mode: vertical-rl;
}

Prova själv

CSS-syntax

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

Egenskapsvärde

Tekniska detaljer

Webbläsarstöd

Tabellen siffror representerar den första webbläsarversion som helt stöder detta egenskap.

Relaterade sidor

Referens:CSS scroll-padding-block-end egenskap

Referens:CSS scroll-padding-block-start egenskap

Referens:CSS scroll-snap-align egenskap

Referens:CSS scroll-snap-type egenskap

Referens:CSS writing-mode egenskap