Poskakování stránky kvůli posuvníku
Jak zabránit, aby centrovaný obsah stránky měli posici v závislosti na posuvníku.
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.
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.
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;
}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.
- Vlastní vzhled scrollbaru: Posuvník v JavaScriptu
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.
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).
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.
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) {
}
Komentáře