Rolování-stop-stop - Triky CSS

Anonim

scroll-snap-stopje 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-stopje volitelná vlastnost pro prvek přitahování rolování v kontejneru přitahování rolování. Další informace o kontejnerech pro přetahování rolováním najdete v scroll-snap-typepoložce almanachu.

scroll-snap-stopumožňuje vynutit přichycení kontejneru posouvání k určitému prvku. Předpokládejme, že jste se posouvali v kontejneru, který přitahoval rolování, a dali jste mu obrovské otočení kolečka myši. Za normálních okolností prohlížeč nechá rychlost vašeho rolování létat kolem snap bodů, dokud se neusadí na snap point blízko místa, kde by rolování normálně skončilo. Nastavením scroll-snap-stopmůžete prohlížeči sdělit, že se musí zastavit u konkrétního prvku, než mu umožníte, aby jej uživatel minul.

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

Syntax

scroll-snap-stop: normal | always;

Hodnoty

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

  • normal je výchozí hodnota a umožňuje rolování prvku bez přichytávání
  • always vynutí prohlížeč, aby se k tomuto prvku přichytil, a to i v případě, že by svitek normálně tento prvek překonal

Příklad

Podívejte se na ukázku pera scroll-snap-stop
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

Chrome scroll-snap-stop: always;v tuto chvíli nemusí podporovat .

Příbuzný

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-align

Zdroje

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