Rolování-zarovnání - - Triky CSS

Anonim

scroll-snap-alignje součástí modulu CSS Scroll Snap. Přitahování rolování označuje „uzamčení“ polohy výřezu ke konkrétním prvkům na stránce při rolování okna (nebo rolovacího kontejneru). Přemýšlejte o kontejneru s rolováním, jako je vložení magnetu na prvek, který se přilepí k horní části výřezu a vynutí stránku, aby přestala rolovat přímo tam.

scroll-snap-alignje požadovaná vlastnost pro prvek přichytávání rolování v kontejneru přichycení rolování. Další informace o kontejnerech pro přetahování rolováním najdete v scroll-snap-typepoložce almanachu. scroll-snap-alignříká prohlížeči, která část prvku by měly být vyrovnány, když je hračka bod setkal: V případě, že prvek snap do start, centernebo endz nadřazeného kontejneru, který obsahuje scroll-snap-typevlastnost?

Pokud chcete, aby se prvek zacvakl na místo na začátku tohoto prvku, dejte mu takovou scroll-snap-alignhodnotu:

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-align: start; )

Syntax

scroll-snap-align: ( none | start | end | center )(1,2)

Pro tuto vlastnost můžete zadat až 2 hodnoty představující bloky a inline osy. Pokud zadáte pouze 1 hodnotu, použije se tato hodnota pro obě osy.

Hodnoty

scroll-snap-align přijímá následující hodnoty:

  • none zakáže přitahování rolování na elementu
  • start při zacvaknutí na místo zarovná začátek prvku se snapportem posuvného kontejneru
  • end zarovná konec prvku se snapportem posuvného kontejneru, když je zacvaknut na místo
  • center při zacvaknutí na místo zarovná střed prvku na snapport posuvného kontejneru

Příklad

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome Firefox TJ Okraj Safari
69 68 11 * 79 11

Mobilní / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 11.0-11.2

Příbuzný

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-stop

Zdroje

  • Doporučení kandidátů CS3 Scroll Snap W3C
  • Praktické přitahování pomocí CSS
  • Představujeme CSS Scroll Snap Points