CSS scroll-margin-block-end egenskap

Definition och användning

scroll-margin-block-end Egenskapen specificerar avståndet mellan justeringspositionen i blockriktningen och behållaren.

Detta innebär att när du stoppar med att rulla, justeras rullen snabbt och stoppar på den plats där den närmaste elementen i blockriktningen slutar och avståndet till behållaren är specificerat.

Blockriktning är den position som nästa rad placeras i förhållande till den nuvarande raden. Detta är också sättet som etiketter med CSS display: block; (t.ex. <p>- och <div>-etiketter) lägger ut sig på sidan. Blockriktningen beror på skrivspråket, till exempel är nya rader i mongoliska arrangerade från vänster till höger, så blockriktningen är också från vänster till höger, medan blockriktningen på engelska sidor är nedåt. Blockriktningen kan justeras genom CSS-attribut writing-mode att definiera.

Fästplatsen är den plats där underelementet fastnar i behållaren när du stoppar med att rulla.

Observera:Denna egenskap är endast tillämplig på blockriktningen scroll-snap-align egenskapen är satt till 'end' innan den börjar fungera.

För att se scroll-margin-block-end egenskapens effekt måste sättas på underelementet scroll-margin-block-end och scroll-snap-align egenskapen, och sätts på föräldrelementet scroll-snap-type .

CSS-egenskapen scroll-margin-inline och scroll-margin-block egenskapen motsvarar CSS-egenskapen CSS scroll-margin-top egenskap,scroll-margin-bottom,scroll-margin-left och scroll-margin-right Mycket liknande, men scroll-margin-block och scroll-margin-inline Egenskapen beror på blockriktningen och inline-riktningen.

Exempel

Exempel 1

I blockriktningen sätts justeringspositionen och containerns skrollmärg till 20px:

div {
  scroll-margin-block-end: 20px;
}

Prova själv

Exempel 2

När <div>-elementets writing-mode När egenskapsvärdet är satt till vertical-rl, är blockriktningen från höger till vänster. Resultatet är att elementets ände flyttas från botten till vänster:

div {
  scroll-margin-block-end: 50px;
  writing-mode: vertical-rl;
}

Prova själv

CSS-syntax

scroll-margin-block-end: 0|value|initial|inherit;

Egenskapsvärde

Värde Beskrivning
0 Standard. Elementets standard scroll-margin-block-end avstånd.
length

Specificera avstånd med enheter som px, pt, cm m.m. Tillåter negativa värden.

Se till:CSS enheter.
initial Sätt detta egenskap till dess standardvärde. Se till: initial.
inherit Följ från föräldrelementet detta egenskap. Se till: inherit.

Tekniska detaljer

Standardvärde: 0
Arv: Nej
Animation production: Stöds inte. Se till:Animation relaterade egenskaper.
Version: CSS3
JavaScript-syntax: object.style.scrollMarginBlockEnd="20px"

Webbläsarstöd

Tabellens siffror representerar den första webbläsarversion 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-snap-align egenskap

Referens:CSS scroll-snap-type egenskap

Referens:CSS writing-mode egenskap