Rolovací polstrování - Triky CSS

Anonim

scroll-paddingje 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-paddingje volitelná vlastnost pro libovolný kontejner přichycení rolování. Kontejnery se svislým posouváním jsou definovány, kdykoli je scroll-snap-typevlastnost nastavena na jakoukoli jinou hodnotu none. Další informace o kontejnerech pro přetahování rolováním najdete v scroll-snap-typepoložce almanachu.

Dobře, takže pokračujte k posouvání

scroll-paddingse používá k úpravě optimální oblasti zobrazení zachycovacího kontejneru. To je užitečné, pokud má kontejner prvky, jako je pevná hlavička, která by zakrývala prvky uvnitř, nebo pokud posouvatelný kontejner potřebuje určitý prostor, aby poskytl prostorovým prvkům prostor k dýchání, jakmile byly „zacvaknuty“ do správné polohy.

Jednoduchým příkladem by bylo scroll-paddingvytvoření určité pevné mezery 50pxv horní a levé části kontejneru:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Růžové oblasti zobrazují výplň rolování na kontejneru pro rolování.

Syntax

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

Důležitá poznámka k dlouhým rukám: Chrome aktuálně nepodporuje 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-padding přijímá následující hodnoty:

  • autoponechává výplň určenou prohlížečem / uživatelským agentem. Obecně to znamená hodnotu 0px, ale může být nenulová, pokud uživatelský agent rozhodne, že je vhodnější jiná hodnota.
  • je napsán podobné paddinga další vlastnosti, kde může být hodnota definovaná s jednotkami ( px, em, vh, atd.) nebo jako procento z obalu samotného.

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