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

CSS vlastnost overflow-anchor umožňuje nastavit, jak si má prohlížeč pamatovat, kam bylo odscrollováno.

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 inheritinitial 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

Autor se webdesignu intensivněji věnuje od roku 2005. V poslední době se zabývá hlavně tvorbou responsivních webů a frontendem. Od roku 2013 o tom píše na webu jecas.cz.

Zatím nebyl přidán žádný komentář, buďte první!

Přidat komentář
Zdroj: https://www.zdrojak.cz/?p=23027