CSS scroll-margin-block-end eigenschap

Definitie en gebruik

scroll-margin-block-end De eigenschap specificeert de afstand tussen de afstemmingspositie in de blokvorm en de container.

Dit betekent dat wanneer je het scrolleffect stopt, het snel wordt aangepast en stopt op de aangegeven afstand tussen de aangehechte positie van het subelement aan de eindkant van de blokvorm en de container.

De blokvorm is de richting van de positie ten opzichte van de bestaande rij, waarop de volgende rij wordt geplaatst. Dit is ook de manier waarop labels met CSS display: block; (zoals <p> en <div>-tags) worden geplaatst in de lay-out van de pagina. De blokvorm hangt af van de schrijftaal, bijvoorbeeld, de nieuwe regel van het Mongools wordt van links naar rechts geplaatst, dus de blokvorm is ook van links naar rechts, terwijl de blokvorm van een Engelse pagina naar beneden is. De blokvorm kan worden vastgesteld via de CSS-eigenschap writing-mode om te definiëren.

De aantrekkelijke positie is de positie waarin het onderliggende element zich vastzet in het container wanneer je het scrolleer stopt.

Opmerking:Deze eigenschap werkt alleen in de blokkenrichting scroll-snap-align eigenschap is ingesteld op 'end' voordat het effect optreedt.

om te zien scroll-margin-block-end eigenschappen effect, moet op de onderliggende elementen worden ingesteld scroll-margin-block-end en scroll-snap-align eigenschappen, en stel op de ouder elementen in 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 blokkenrichting en de inline-richting.

Voorbeeld

Voorbeeld 1

Stel de uitlijnpositie en de scroll-uitmarge tussen het container en de positie in op 20px in de blokkenrichting:

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

Probeer het zelf uit

Voorbeeld 2

Wanneer de <div>-elementen writing-mode Wanneer de eigenschap vertical-rl is ingesteld, is de blokkenrichting van rechts naar links. Het resultaat is dat de uiteinden van het element van onder naar links verhuizen:

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

Probeer het zelf uit

CSS Syntax

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

Eigenschapswaarde

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

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

Raadpleeg:CSS Units.
initial Stel deze eigenschap in op de standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap erft 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.scrollMarginBlockEnd="20px"

Browserondersteuning

Tafels met cijfers geven de browserversie aan die de eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Gerelateerde pagina's

Referentie:CSS scroll-snap-align eigenschap

Referentie:CSS scroll-snap-type eigenschap

Referentie:CSS writing-mode eigenschap