CSS scroll-margin-block eigenschap

Definitie en gebruik

scroll-margin-block De eigenschap specificeert de afstand tussen de aantrekkingskrachtige positie (snap position) en de container in de blokkenrichting.

Dit betekent dat de scroll snel wordt aangepast en stopt op de aantrekkingskrachtige positie in de blokkenrichting op de gespecificeerde afstand van de container.

De blokkenrichting is de richting waarin de volgende regel ten opzichte van de huidige regelpositie wordt geplaatst, wat ook de manier is waarop etiketten met CSS display: block; (zoals <p> en <div>-etiketten) worden geplaatst op de pagina. De blokkenrichting hangt af van de schrijfrichting van de taal, bijvoorbeeld, het Mongools nieuwe regel wordt van links naar rechts geplaatst, dus de blokkenrichting is ook van links naar rechts, terwijl de blokkenrichting van een Engelse pagina naar beneden is. De blokkenrichting kan worden ingesteld via de CSS-eigenschap writing-mode gedefinieerd.

De aantrekkingskrachtige positie is de positie waarop een subelement in de container wordt geaantrokken wanneer je stopt met scrollen.

Let op:Deze eigenschap is alleen van toepassing op de blokkenrichting van scroll-snap-align De eigenschap is geldig wanneer de waarde 'start' of 'end' is ingesteld.

scroll-margin-block De eigenschap is een afkorting van de volgende eigenschappen:

scroll-margin-block De waarde van de eigenschap kan op verschillende manieren worden ingesteld:

Als de scroll-margin-block-eigenschap twee waarden heeft:

scroll-margin-block: 10px 50px;
  • de afstand aan het begin is 10px
  • de afstand aan het einde is 50px

als de scroll-margin-block eigenschap een waarde heeft:

scroll-margin-block: 10px;
  • de afstand aan het begin en einde is 10px

om te zien scroll-margin-block eigenschappen in op de ouder element, dan moet de scroll-margin-block en scroll-snap-align eigenschappen, en stel de scroll-snap-type eigenschappen.

CSS van scroll-margin-inline en scroll-margin-block eigenschappen zijn vergelijkbaar met de CSS-eigenschappen CSS scroll-margin-top eigenschap,scroll-margin-bottom,scroll-margin-left en scroll-margin-right zeer vergelijkbaar, maar scroll-margin-block en scroll-margin-inline De eigenschap is afhankelijk van de blokdirection en de inline-direction.

Voorbeeld

Voorbeeld 1

Stel de afstand tussen de吸附positie in de blokdirection en de scrollbare container in:

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

Probeer het zelf uit

Voorbeeld 2

Als de zoon elementen writing-mode Wanneer de eigenschapwaarde vertical-rl is ingesteld, verhuist het element in de blokdirection van de top naar de rechterkant en van de onderkant naar de linkerkant. Dit beïnvloedt het scroll-adsorptiegedrag en scroll-margin-block Hoe de eigenschap werkt:

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

Probeer het zelf uit

CSS syntax

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

Eigenschapswaarde

Waarde Beschrijving
0 Standaard. De standaard scroll-margin-block waarde van het element.
length

Specificeer een afstand met een eenheid zoals px, pt, cm. Negatieve waarden zijn toegestaan.

Raadpleeg:CSS Eenheid.
initial Deze eigenschap instellen op de standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap overnemen van de ouder element. Raadpleeg inherit.

Technische details

Standaardwaarde: 0
Inheritance: Nee
Animatie maken: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript syntax: object.style.scrollMarginBlock="20px"

Browserondersteuning

Tafelgetallen vertegenwoordigen de browserversie die de eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Gerelateerde pagina'sCSS scroll-margin-block-end eigenschap

Gerelateerde pagina'sCSS scroll-margin-block-start eigenschap

Gerelateerde pagina'sCSS scroll-snap-align eigenschap

Gerelateerde pagina'sCSS scroll-snap-type eigenschap

Gerelateerde pagina'sCSS writing-mode eigenschap