Zachování pozice scrollování pomocí overflow-anchor

Celý článek

Text vyšel původně na webu autora.

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

Typicky v těchto dvou případech:

1. Změní se orientace z výšky na šířku nebo obráceně (zejména u mobilních zařízení).
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 prochází webem, a když nastane některý z výše uvedených případů, je ztracen, protože ve viewportu stránky (aktuálně viditelné oblasti) vidí najednou něco úplně jiného, než co 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, viz text Poskakování stránky, proč vadí a jak se ho zbavit.

Ř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. Porovnejte si chování:

A prohlížeče Chrome 56+ (leden 2017) a Firefox 66+ (březen 2019) dokáží toto chování ovlivňovat relativně mladou CSS vlastností overflow-anchor.

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 elementy s overflow: auto a 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í, které budete pravděpodobně preferovat).

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í prohlížeče způsobuje problémy.

Ve většině případů nebudete muset nic měnit a necháte prohlížeč pracovat po svém. Pokud vám to nevyhovuje, můžete chytrost prohlížeče vypnout.

Odkazy

• Návrh specifikace
• MDN: overflow-anchor
• Mozilla Hacks: Scroll Anchoring in Firefox 66