CSS scroll-margin-block egenskap

Definition och användning

scroll-margin-block Attributet specificerar avståndet mellan fästningspositionen (snap position) och behållaren i blockriktningen.

Detta innebär att när du stoppar med att rulla, justeras rullen snabbt och stoppar på en position för att fästa i blockriktningen som är specificerad som avståndet mellan fästningspositionen och behållaren.

Blockriktningen är riktningen för att placera nästa rad relaterat till den befintliga radpositionen, detta är också layoutmetoden för etiketter med CSS display: block; (t.ex. <p>- och <div>-etiketter) 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 definieras genom CSS-attributet writing-mode definiera.

Anslutningspositionen är den plats där en underliggande element fäster sig i behållaren när du stoppar med att rulla.

Observera:Denna egenskap är endast tillämplig på blockriktningen scroll-snap-align Giltigt när attributet är satt till 'start' eller 'end'.

scroll-margin-block Attributet är en förkortning för följande attribut:

scroll-margin-block Värdet för attributet kan sättas på olika sätt:

Om scroll-margin-block-attribut har två värden:

scroll-margin-block: 10px 50px;
  • avståndet vid början är 10px
  • avståndet vid slutet är 50px

om scroll-margin-block-egenskapen har ett värde:

scroll-margin-block: 10px;
  • avståndet från början och slut är båda 10px

för att se scroll-margin-block egenskapen på föräldrelementet, måste scroll-margin-block och scroll-snap-align egenskapen, och sätt scroll-snap-type egenskapen.

CSS: 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 är beroende av blockriktningen och inline-riktningen.

Exempel

Exempel 1

Ställ in avståndet mellan fästplatsen i blockriktningen och den rullbara behållaren:

div {
  scroll-margin-block: 10px;
}

Prova själv

Exempel 2

När underordnade elementens writing-mode När egenskapsvärdet är satt till vertical-rl, flyttas elementets startposition i blockriktningen från toppen till höger och slutpositionen från botten till vänster. Detta påverkar scroll-klippningsbeteendet samt scroll-margin-block Sättet egenskapen fungerar:

div {
  scroll-margin-block: 20px 0;
  writing-mode: vertical-rl;
}

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde Beskrivning
0 Standard. Elementets standard scroll-margin-block-värde.
length

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

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

Tekniska detaljer

Standardvärde: 0
Arvande: Nej
Animaationsproduktion: Stöds inte. Se vidare:Animaationsrelaterade egenskaper.
Version: CSS3
JavaScript-syntax: object.style.scrollMarginBlock="20px"

Webbläsarstöd

Tabellen 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-margin-block-end egenskap

Referens:CSS scroll-margin-block-start egenskap

Referens:CSS scroll-snap-align egenskap

Referens:CSS scroll-snap-type egenskap

Referens:CSS writing-mode egenskap