CSS scroll-snap-align eigenschap

Definitie en gebruik

scroll-snap-align Deze eigenschap specificeert dat de elementen zich aan de focuspositie klemmen wanneer je ophoudt met scrollen.

Om het scroll-snap-gedrag te realiseren, moet je deze eigenschap instellen op de onderliggende elementen scroll-snap-align eigenschap, en stel deze in op het ouder-element scroll-snap-type Eigenschap.

Voorbeeld

Voorbeeld 1

Laat het dichtstbijzijnde element aan het midden hechten wanneer de gebruiker stopt met scrollen:

div {
  scroll-snap-align: center;
}

Probeer het zelf

Voorbeeld 2: Afbeeldingsgalerij

scroll-snap-align De eigenschap is zeer geschikt voor het scrollen door een galerij van afbeeldingen. Hier is de scrollrichting horizontaal en de hechting uitlijning is centraal. Wanneer de gebruiker de scrollbar loslaat, wordt het dichtstbijzijnde afbeelding gelijmd aan het midden van de scrollbare ruimte. Probeer een afbeelding te klikken en gebruik dan de pijltjestoetsen om door hen te bladeren:

#container > img {
  scroll-snap-align: none center;
}
Beijing Dancer Wuhan Tulip Hangzhou

Probeer het zelf

alley bridge in jungle mountains man with camera Cinque Terre

Voorbeeld 3: Verticaal uitlijnen van hechtingpositie in blokkenrichting

Bij het scrollen in de verticale richting,scroll-snap-align De eigenschap kan ook worden ingesteld op de startpositie van het element in de blokkenrichting:

#container > div {
  scroll-snap-align: start none;
}

Probeer het zelf

CSS syntaxis

scroll-snap-align: none|start|end|center|block inline|initial|inherit;

Eigenschapswaarde

Waarde Beschrijving
none Geen scrollen hechtingseffect. Standaardwaarde.
start Elementen worden aan het begin van de x- en y-as gelijmd tijdens het scrollen.
end Elementen worden aan het einde van de x- en y-as gelijmd tijdens het scrollen.
center Elementen worden aan het midden van de x- en y-as gelijmd tijdens het scrollen.
block inline Dubbelwaardige syntaxis. De eerste waarde specificeert de hechting aan de blokkenrichting, de tweede waarde specificeert de hechting aan de lijnrichting.
initial Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap wordt van de ouderlijke elementen geërfd. Raadpleeg inherit.

Technische details

Standaardwaarde: none
Inheritantie: Nee
Animatie maken: Niet ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS3
JavaScript syntaxis: object.style.scrollSnapAlign="start"

Browserondersteuning

De cijfers in de tabel geven de browserversie aan die de property volledig ondersteunt.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

Gerelateerde pagina's

Referentie:CSS scroll-snap-type eigenschap