Rolovací okraj - Triky CSS

Anonim

scroll-marginje 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-marginje 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.

Zadejte rolovací okraj

scroll-marginse používá k úpravě oblasti uchopení prvku (pole, které definuje, kam bude prvek přichycen). Přidání scroll-marginje užitečné, když potřebujete dát elementu prostor od okraje kontejneru, když je zacvaknutý na místo, ale umožňuje situace, kdy každý prvek může vyžadovat mírně odlišné mezery. Pokud všechny prvky mají stejné požadavky na mezery, zvažte použití scroll-paddingna nadřazeném kontejneru, scroll-marginprotože to ovlivní mezery pro všechny prvky v kontejneru.

Jednoduchý příklad, kde scroll-marginumožňuje mezery 50px kolem horní a levé části prvku, vypadá takto:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
Růžová oblast představuje scroll-marginna tomto prvku.

Syntax

/* Shorthand */ scroll-margin: (1,4); /* Longhands */ scroll-margin-top: ; scroll-margin-right: ; scroll-margin-bottom: ; scroll-margin-left: ; /* inline-specific and block-specific properties as well */ scroll-margin-block: (1,2); scroll-margin-inline: (1,2);

Důležitá poznámka k dlouhým rukou: Chrome (a možná i jiné prohlížeče) aktuálně nepodporují formát scroll-paddinga scroll-marginvlastnosti z ruky . Pro maximální podporu prohlížeče použijte zkratku. Další podrobnosti a aktuální stav najdete v tomto čísle na sledování chyb chromu.

Hodnoty

scroll-marginpřijímá následující délku hodnota, která je zapsána podobně margina další vlastnosti, kdy hodnota může být definována s jednotkami ( px, em, vh, atd). Další informace najdete v modulu hodnot a jednotek W3C. Procenta nelze použít pro scroll-marginspecifikaci.

Příklad

Podívejte se na příklad 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-snap-type
  • 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