CSS scroll-snap-align -ominaisuus

Määrittely ja käyttö

scroll-snap-align Ominaisuus määrittää, mihin kohdtaan elementti kiinnittyy, kun pyörittäminen lopetetaan.

Jotta saavutetaan pyöristysliimaus, täytyy asettaa ominaisuus lapsielementille scroll-snap-align ominaisuus ja aseta isäntäelementille scroll-snap-type Ominaisuus.

Esimerkki

Esimerkki 1

Kun käyttäjä lopettaa rullauksen, lähin elementti imetään keskelle:

div {
  scroll-snap-align: center;
}

Kokeile itse

Esimerkki 2: Kuvakirjasto

scroll-snap-align Ominaisuus sopii erinomaisesti kuvakirjaston selailuun. Tässä, rullaus suunta on horisontaalinen, imusijainnin tasaus on keskellä. Kun käyttäjä vapauttaa rullapalkin, lähin kuva imetään liikkuvan alueen keskelle. Kokeile klikata kuvaa ja käyttää nuolinäppäimiä niiden selailuun:

#container > img {
  scroll-snap-align: none center;
}
Peking Tanssija Wuhan Kukka Hangzhou

Kokeile itse

alley bridge in jungle mountains man with camera Cinque Terre

Esimerkki 3: Tasoitetun imusijainnin horisontaalinen tasaus blokkisuunnassa

Kun rullataan vertikaalisesti,scroll-snap-align Ominaisuus voidaan myös asettaa elementin alkupisteeksi blokkisuunnassa:

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

Kokeile itse

CSS-kieli

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

Ominaisuuden arvo

Arvo Kuvaus
none Ei pyöristämisvaikutusta. Oletusarvo.
start X- ja Y-akselilla, elementin alussa tehdään pyöristäminen.
end X- ja Y-akselilla, elementin lopussa tehdään pyöristäminen.
center X- ja Y-akselilla, elementin keskellä tehdään pyöristäminen.
block inline Kaksivaiheinen kieli. Ensimmäinen arvo määrittää blokkirivin suuntaisen imusijainnin, toinen arvo määrittää rivirivin suuntaisen imusijainnin.
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit Periisi isältään tämän ominaisuuden. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: none
Perintä: Ei
Animaation tekeminen: Ei tukea. Katso:Animaatiot.
Versio: CSS3
JavaScript-kieli: object.style.scrollSnapAlign="start"

Selaimen tuki

Taulukossa olevat numerot ilmaisevat ensimmäisen täysin tukevan selaimen version.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

Liittyvät sivut

Viittaus:CSS scroll-snap-type -ominaisuus