Zachování posice scrollování overflow-anchor

Poměrně dlouhou dobu prohlížeče neřešily situace, kdy se na stránce stane něco takového, co způsobí odrolování někam pryč.

Typicky po následujících případech:

  1. U (především) mobilních zařízení se změní orientace z výšky na šířku nebo obráceně.

  2. Před obsahem se donačte nějaký prvek se zprvu neznámými rozměry a stránka poskočí. Například video, obrázek nebo reklama.

Návštěvník si tak prochází webem, stane se nějaká z výše uvedených věcí, a je ztracen, protože je ve viewportu stránky (aktuálně viditelné oblasti) úplně něco jiného, než tam bylo předtím.

Druhý případ s obsahem o neznámých rozměrech si povětšinou zkušený tvůrce webů dokáže ohlídat:

Řešit změnu orientace ale už nejde bez nějakého relativně komplikovaného počítání a scrollování v JavaScriptu.

Naštěstí oba případy začaly automaticky řešit přímo prohlížeče. A prohlížeče Chrome 56+ (leden 2017) a Firefox 66+ (březen 2019) dokáží toto chování ovlivňovat CSS vlastností.

CSS vlastnost overflow-anchor

Právě vlastnost overflow-anchror zapíná/vypíná toto chytré zapamatování odrolování. A nastavuje se pro elementy s posuvníkem (tedy pro celou stránku nebo pro něco s overflow: auto / overflow: scroll).

Kromě globálních hodnot inherit, initial a unset existují 2 specifické hodnoty:

overflow-anchor: auto

Prohlížeč se sám snaží chovat chytře (výchozí chování).

overflow-anchor: none

Zakáže automatické pokusy prohlížeče o lepší uživatelský zážitek. Hodí se jako pojistka u elementů, kde je nějaké vlastní JavaScriptové scrollování, pokud výchozí chování způsobuje problémy.

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Přichytávací rolování v CSS

Přichytávací rolování v CSS

CSS vlastnost scroll-snap dokáže řídit rolování, aby přeskakovalo mezi jednotlivými elementy.

Zvýraznění aktivní kotvy

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

CSS vlastnosti content a attr

Úprava obsahu pomocí content a attr

Pomocí CSS vlastnosti content a funkce attr lze ovlivňovat z CSS výsledný textový obsah webu.

CSS transition

Animace v CSS pomocí transition

CSS vlastností transition lze na stránce docílit přechodových animací bez JavaScriptu.

CSS animace

CSS vlastnost animation

Animování prvků na stránce pomocí čistého CSS s využitím @keyframes.

Komentáře