Přejít k navigační liště

Zdroják » Webdesign » Zachování pozice scrollování pomocí overflow-anchor

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

Články Webdesign

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

Komentáře

Subscribe
Upozornit na
guest
0 Komentářů
Inline Feedbacks
View all comments

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.