CSS scroll-margin-bottom eigenschap

Definitie en gebruik

scroll-margin-bottom Het eigenschap specificeert de afstand tussen de吸附位置 en het container.

吸附位置是指子元素在停止滚动时吸附到容器中的位置。

吸附位置 verwijst naar de positie van het sub-element in het container wanneer het scrolleffect stopt. scroll-snap-align 吸附位置 wordt ingesteld via Eigenschap instellen, maar kan ook beïnvloed worden door CSS eigenschappen en writing-mode invloed.

Let op:Deze eigenschap is alleen geldig wanneer de吸附positie ingesteld is op de onderkant van het sub-element.

om scroll-margin-bottom Eigenschapseffecten moeten ingesteld worden op het sub-element om scroll-margin-bottom en scroll-snap-align Eigenschap, en stel op de ouder element scroll-snap-type Eigenschap.

Voorbeeld

Voorbeeld 1

Stel de scroll margin bottom tussen de吸附positie en het container in op 20px:

div {
  scroll-margin-bottom: 20px;
}

Probeer het zelf

Voorbeeld 2: Afbeeldingscollectie

scroll-margin-bottom De eigenschap kan gebruikt worden voor een afbeeldingengalerij met吸附gedrag. In dit voorbeeld:scroll-margin-bottom Laat de gebruiker weten dat er nog een afbeelding onderaan is. Scrol naar de eerste afbeelding om het effect te zien:

#container > img {
  scroll-margin-bottom: 30px;
}

Probeer het zelf

Voorbeeld 3:吸附位置

Om scroll-margin-bottom De eigenschap is van kracht, de吸附位置 moet ingesteld worden op de onderkant van het sub-element. In dit voorbeeld:writing-mode De eigenschap verandert de吸附位置 van de onderkant van de sub-element naar de linkerkant. Bij het gebruik van deze code:scroll-margin-bottom De eigenschap zal niet meer geldig zijn:

#container {
  writing-mode: vertical-rl;
}
#container > div {
  scroll-margin-bottom: 30px;
  scroll-snap-align: end none;
}

Probeer het zelf

CSS syntaxis

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

Eigenschapswaarde

Waarde Beschrijving
0 De scroll margin bottom aan de onderkant is nul. Dit is de standaardwaarde.
length

Specificeer de scroll margin bottom in px, pt, cm of andere eenheden. Negatieve waarden zijn toegestaan.

Raadpleeg:CSS Einhed.
initial Stel deze eigenschap in op de standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap wordt van de ouder element overgenomen. Raadpleeg inherit.

Technische details

Standaardwaarde: none
Inheritance: Nee
Animation maken: Niet ondersteund. Raadpleeg:Animation gerelateerde eigenschappen.
Versie: CSS3
JavaScript syntaxis: object.style.scrollMarginBottom="20px"

Browserondersteuning

De cijfers in de tabel 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's

Referentie:CSS richting eigenschap

Referentie:CSS scroll-snap-align eigenschap

Referentie:CSS scroll-snap-type eigenschap

Referentie:CSS writing-mode eigenschap