Když uživatel posouvá stránku, málokdy se mu povede, že posun skončí přesně na začátku odstavce nebo obrázku, což pak zhoršuje UX (dojem ze stránky). Do teď se podobné situace řešili pomocí javaskriptu, ale kombinace JS a skrolování většinou UX ještě zhorší.
Díky nové CSS specifikaci Scroll snap můžete tyto situace vyřešit automaticky jen pomocí CSS definice.
Pokračování textu Posun obsahu se zachytávánímChcete zobrazit modální dialog ve stránce, který je vždy centrovaný do středu obrazovky? To asi budete potřebovat hodně skriptů na jeho otevření, vypočtení velikosti, vycentrování a jeho udržování v obraze (např. při otočení telefonu). Viz demo.
Ale co kdyby tohle všechno šlo udělat jen pomocí HTML a CSS, nebylo by to super?
A představte si, že to jde!
U moderních stránek je často potřeba zobrazit obsah tak, aby vyplnil celé okno prohlížeče (např. kvůli pozadí, vycentrování horizontálně i vertikálně apod.). Většina designérů a programátorů většinou zkusí jako první krok CSS:
body { width: 100%; height: 100%; }
A když to nepřinese požadovaný efekt, tak přejdou k Javascriptu a velikost okna počítají dynamicky.
K tak drastickým řešením ale není důvod a stejného efektu lze dosáhnout i pomocí CSS, jen je potřeba vědět, co nastavit:
html, body { width: 100%; height: 100%; }
Stačí kromě BODY nastavit styl i na HTML, které každou stránku obklopuje, a jako zázrakem se celá stránka roztáhne. Pak již můžete nastavit pozadí automaticky zvětšené a centrované na okno prohlížeče:
body {
background: url('/images/page-bg.png')
no-repeat scroll center center
transparent;
background-size: contain;
}
Nebo oblíbený obsah ve sloupci uprostřed stránky:
body {
max-width: 1024px;
margin: 1em auto;
}
Nebo patičku stránky zobrazenou vždy u dolního okraje okna (i když je obsah stránky menší):
body {
/* zamezí překrytí obsahu patičkou */
margin-bottom: 1EM;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%; /* nebo auto */
height: 1EM;
}
Pozor na to, že pokud byste chtěli do BODY nastavit padding pro odsazení, bude problém s nastavením šířky (a výšky) na 100%. Ve výchozím nastavení se totiž padding nepočítá do šířky prvku a tak by jeho výsledná šířka byla { 100% + levý padding + pravý padding }.
Aby prohlížeč správně vypočetl 100% šířku, je potřeba změnit jeho výpočet na border-box:
body {
width: 100%;
height: 100%;
padding: 1em; /* odsazení od okrajů */
box-sizing: border-box; /* započítej
padding do width a height */
}
WebKit jádro je známé chybami ve vykreslování (renderování), které se projevují efektem duchů; tedy tím, že při skrolování se vzhled prvku (částečně) „nakopíruje“ několikrát nad sebe (tak jak je ukázáno na obrázku).
Zpravidla se to stává, pokud máte na stránce kombinace prvků s CSS styly position:fixed, opacity nebo visibility. Například tahle chyba se objevila v Chrome ve verzi 15 a byla opravena ve verzi 19.
Chyba tedy zmizí stejně jako se objevila (tzn. vývojáři webkitu ji v některé verzi vytvořili a pak ji opraví v nějaké následující), ale mezitím je potřeba použít workaround známý jako hasLayout-fix:
.hasLayoutFix {
-webkit-transform:translateZ(0);
}Tento styl aplikujte na prvek, který se špatně renderuje.
Styl sám nemá žádný vliv na vhled, protože otáčí prvkem o 0° v 3D prostoru, ale jeho důsledek je ten, že renderovací jádro musí prvek vyjmout z 2D prostoru (ve kterém se běžně HTML prvky renderují) a přesunout ho do 3D prostoru (zpravidla to znamená, že ho začne renderovat grafická karta) a tím dojde k obejití chyby v jádře.
Alternativný verze hasLayout-fix funguje obdobně, jen nechá prvek zvětšit na 100% původní velikosti:
.hasLayoutFix2 {
-webkit-transform: scale3d(1,1,1);
}Přesun prvku do 3D prostoru může snížit výkonnost na některých zařízeních (zpravidla starší iPhony a Androidy bez vlastního grafického čipu), ale většinou je lepší mít o něco pomajelší skrolování než při něm vidět duchy.
Možná to zní divně, ale ani na dotykových zařízeních není výchozí, že lze skrolovat obsah prstem.
Celou stránku samozřejmě posouvat prstem jde, ale pokud do stránky vložíte nějaký kontejner např. s overflow:auto nebo overflow:scroll, tak mobilní prohlížeče tyto styly zpravidla ignorují a zobrazí jen to, co se vejde na obrazovku.
Pro povolení ale stačí použít jednoduchý styl:
.container {
/* nastaví scrollování na desktopu */
height: 100%;
overflow: auto;
/* povolí skrolovat obsah prvku
pomocí posouvání prstem */
-webkit-overflow-scrolling: touch;
}
Pozor ale na to, že takto upravený kontejner může na některých zařízeních způsobovat určité problémy (např. posouvání nebude tak plynulé jako když jde o jednoduchou stránku).