Rolovací typ - Triky CSS

Anonim

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

To je užitečné, pokud chcete zastavit prohlížeč v určitých bodech stránky. Například: Uživatel, který prochází fotogalerií, pravděpodobně nechce posouvat do poloviny obrázku - pravděpodobně by dával přednost tomu, aby se obrázek při posouvání „přichytil“ na správnou pozici. Přitahování rolování poskytuje vývojářům způsob, jak toto chování zvládnout pomocí čistého CSS.

scroll-snap-typeje požadovaná vlastnost u libovolného rolovatelného kontejneru, do kterého chcete přidat přichytávání rolování. Odpovídá na tři otázky pro rolovací kontejner:

  1. Používá kontejner přichytávání svitku?
  2. Na kterou osu - x (horizontální), y (vertikální), blok nebo vložený - by se mělo vztahovat přichytávání rolování?
  3. Jak by se mělo chovat přichycování rolování? Je to vynuceno na 100%, nebo se to projeví, až když se uživatel dostane „dostatečně blízko“ k poloze snap? Více o tom později.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Syntax

scroll-snap-type: none | ( x | y | block | inline | both ) ( mandatory | proximity )

Hodnoty

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

  • none zakáže přitahování rolování.
  • x umožňuje přichytávání rolování pouze podél osy x.
  • y umožňuje přitahování rolování pouze podél osy y.
  • block umožňuje přichytávání rolování pouze podél osy bloku.
  • inline umožňuje přichytávání rolování pouze podél osy inline.
  • bothumožňuje přitahování rolování podél obou os (které si můžete představit jako xa y, nebo inlinea block.
  • mandatory je hodnota přísnosti, která prohlížeči říká, že má vždy přejít do polohy snap, když nedochází k posouvání.
  • proximityje hodnota přísnosti, která prohlížeči říká, že má přejít na pozici přichycení, pokud se akce rolování dost blíží poloze přichycení. Pokud to není docela blízko, pak by prohlížeč neměl přichytávat a posouvání se bude chovat normálně.

Příklad

Podívejte se na příklad typu posouvání pera perem
od CSS-Tricks (@ css-tricks) na CodePen.

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-padding
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Zdroje

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