Poskakování kvůli scrollbaru

Pokud je obsah stránky centrovaný a některé stránky jsou krátké, takže se neobjeví svislý posuvník (zpravidla na pravé straně), způsobí přechod mezi dlouhou stránkou (s posuvníkem) a krátkou (bez posuvníku) nepěkné poskočení.

Existují dvě bezpracné možnosti jako vytvářet stránky delší (vyšší) nebo:

Neřešit.

Plaváček

Minimální výška

Vlastností min-height lze zadat minimální výšku obsahu na hodnotu, která posuvník vytvoří. Může to být ale matoucí/nepříjemné pro uživatele, protože mohou kvůli tomu zbytečně rolovat.

Živá ukázka

Přidání posuvníku

Jednoduchou konstrukcí jde přidat posuvník i v případech, že není potřeba – bude neaktivní (zašedlý).

html {
  overflow-y: scroll;
}

Živá ukázka

Vlastní posuvník

Jedno z možných řešení je si posuvník zajišťovat po svém — prostým vhodně ostylovaným <div>em, který bude absolutně posicovaný, takže nebude ovlivňovat centrování obsahu.

Nestandardní scrollbar ale nemusí být pro návštěvníky úplně ideální.

I kdyby měla náhrada vyřešené rolování kolečkem, klávesnicí i dotykem (se zachováním setrvačnosti) a autoscroll, nikdy nebude respektovat uživatelské nastavení, jako je třeba velikost a plynulost posunu. Dojem, že na stránce je cosi divného, je pak silnější, než kdyby obsahový blok cukal o pár pixelů do strany.

Chamurappi

Odšťouchnutí

Chamurappi vytvořil jednoduchý JavaScript, který změří šířku posuvníku a přidá ji u krátkých stránek jako pravé odsazení (margin-right).

Živá ukázka

Odečtení šířky

S využitím jednotky vw (viewport — rozměry okna) a počítání calc je možné dopočítat šířku posuvníku a nastavit ji jako levý margin čistě v CSS. Řešení je funkční od IE 9.

html {
    margin-left: calc(100vw - 100%);
}

Bude to fungovat tak, že v případě krátké stránky bude levý margin nulový (šířka viewportu se bude rovnat šířce elementu <html>).

V případě dlouhé stránky bude viewport šírší o šířku posuvníku. O tuto šířku se potom dlouhá stránka odšťouchne zleva.

Živá ukázka

Mobilní zařízení

Při odšťouchávání je nutné dát pozor při vytvářneí responsivní podoby webu, kde nejspíš budeme chtít obsah přes celou šířku a odšťouchnutí by bylo nežádoucí. Pokud je centrovaný obsah široký 900px, stačí kód, který odsunutí zajistí obalit @media pravidlem, aby se při menší šířce neaplikoval:

@media (min-width: 900px) {
}

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ářů ↓

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.

Skloňování v CSS

„Programování“ v HTML a CSS

I bez úprav logiky serverového skriptu lze lecčeho dosáhnout samotným CSS.

Centrování v CSS

Centrování na webových stránkách

Ucelený popis různých způsobů vertikálního i horizontálního centrování. Se známou i neznámou šířkou nebo výškou.

CSS vyhledávání a filtrování

CSS vyhledávání a filtrování obsahu

Jak pomocí CSS se špetkou JS filtrovat obsah stránky nebo na ní vyhledávat.

Zobrazení popisku při najetí myší

Popisek po najetí myší

Kterak zobrazovat obsah v tooltipu po najetí myši.

Komentáře