CSS scroll-snap-type eigenschap

Definitie en gebruik

scroll-snap-type Het kenmerk specificeert hoe een element zich aan de focus hecht wanneer je het scrollen stopt en in welke richting het zich hecht.

Om het hechtingseffect van scrollen te realiseren, moet de eigenschap op het ouderlijke element worden ingesteld. scroll-snap-type Eigenschap en instellen op de subelementen scroll-snap-align Eigenschap.

Voorbeeld

Voorbeeld 1

Hechtingseffect van scrollen instellen op de x-as:

#container {
  scroll-snap-type: x mandatory;
}

Probeer het zelf uit

Voorbeeld 2: Hechtingseffect instellen op de x- en y-as

Hechtingseffect instellen op zowel de x- als y-as. scroll-snap-type Eigenschap:

#container > div {
  scroll-snap-type: both mandatory;
}





Probeer het zelf uit

Voorbeeld 3: Hechting met邻近ig gedrag

Hechtingseffect van scrollen instellen met邻近ig gedrag op zowel de x- als y-as. scroll-snap-type Eigenschap. Bij gebruik van deze eigenschapswaarde wordt er geen hechting toegepast als de scrollbeweging exact op de helft tussen twee elementen stopt:

#container > div {
  scroll-snap-type: both proximity;
}





Probeer het zelf uit

CSS syntaxis

scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;

Eigenschapswaarde

Waarde Beschrijving
none Geen hechtingseffect van scrollen. Standaardwaarde.
x Hechtingseffect van scrollen instellen op de x-as.
y Hechtingseffect van scrollen instellen op de y-as.
block Hechtingseffect van scrollen instellen in de blokgerechtigde richting.
inline Hechtingseffect van scrollen instellen in de inline-richting.
both Hechtingseffect van scrollen instellen op zowel de x- als y-as.
mandatory Na het voltooien van de scrollbeweging, verplaatst de scroll automatisch naar de hechtpunten.
proximity

Soortgelijk aan mandatory, maar minder strikt.

Na het voltooien van de scrollbeweging, verplaatst de scroll automatisch naar de hechtpunten, maar er is een gebied tussen de hechtpunten zonder hechtingseffect.

Afhankelijk van de browserparameters.
initial Stel deze eigenschap in op de standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap overneemt van de ouderlijke element. Raadpleeg inherit.

Technische details

Standaardwaarde: none
Inheritance: Nee
Animatieproductie: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript syntaxis: object.style.scrollSnapType="x mandatory"

Browserondersteuning

Tabelweergave van de cijfers geeft de browserversie aan die de eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Opera
69.0 79.0 99.0 11.0 56.0

Gerelateerde pagina's

Referentie:CSS scroll-snap-align eigenschap