24/6/2016
Vložil: Jakub
1621
Sdílet: Facebook

Plynulé scrollování v Google Chrome

Současné trendy

V dnešní době jsou moderní dlouhé rolovací stránky, které dávají dostatek prostoru pro větší množství informací, zároveň podporují tendence věci zjednodušovat a nezatěžovat návštěvníka přílišným přemýšlením, kde by mohl najít to, co zrovna hledá, či mu rovnou podsunout to, co chceme, aby našel. Moderní webové stránky (včetně těch našich) se řídí standardy HTML5, CSS3, používají inteligentních HTML frameworků (Bootstrap) a naprosto ideálně ještě CSS preprocesor (osobně používám LESS).

Kombinace právě těchto technologií dávají člověku při tvorbě frontendu nekonečně volnou ruku. Můžete mít frontend sebekrásnější, ale plynulost práce s webem a jeho atraktivita pro oko dělá určitě více než polovinu komfortu. Můžete mít krásný scrollovací parallax, ale pokud bude tvrdě přeskakovat po 200px místo, aby plynule "klouzal", efekt úplně zanikne a bude to vypadat spíše jako chyba (což se často děje i v praxi).

V čem je problém?

Celá ta legrace spočívá v tom, jak jsou nastaveny webové prohlížeče. Při testování si nelze nevšimnout, že např. na Firefoxu se žádné takové chyby jako sekavý parallax nedějí. Je to způsobeno tím, že firefoxové scrollování relativně pomalu přejíždí a pomaleji akceleruje. Celý pohyb pak vypadá plynuleji a máte pocit, že obsah po webu "plynule klouže".  Zda tomu tak je, či není, si většinou člověk neuvědomí právě dokud nedojede na některý z elementů jako je Parallax či fixovaná fotografie. Úplně nejhorší scrollování mi přijde právě na Google Chrome, který je aktuálně jeden z nejpoužívanějších prohlížečů. Tato chyba je více či méně vidět v různých verzích i jiných prohlížečů. Proto by bylo vhodné ji vyřešit jednou pro vždy.

Snadné řešení

Řešení může být velmi snadné a zároveň elegantní. Po průzkumu internetu jsem našel moc pěkný jQuery NiceScroll pluginTento plugin najdete např. i přímo na této stránce, stačí, když zascrollujete nahoru nebo dolů a podíváte se doprava. Uvidíte optimalizovatelný scrollbar, u kterého nejen, že lze velmi snadno, ale i efektivně úplně překonfigurovat vzhled a chování scrollování, ale modul zároveň modifikuje jeho rychlost a plynulost.

Tímto způsobem tedy jednou provždy vyřešíte problém s trhavým scrollováním, jelikož plugin velmi obstojně funguje na všech webových prohlížečích i v mobilních telefonech. Jako bonus získáte možnost mít vlastní postranní lištu, která může lépe zapadat do korporátní identity i grafiky celého webu. Vlastní design a chování postranní lišty může být další faktor, který může váš web odlišovat od konkurence.

ZPĚT

David Rubek - sídlo - Žižkova 346, 273 09 Kladno -Švermov, IČO: 616 39 133, Zapsán u: Magistrát města Kladna / odbor obecní živnostenský úřad. Kladno 272 52, Starosty Pavla 44

Tento web k poskytování služeb, zabezpečení Vašich dat a anlýze návštěvnosti používá soubory cookies. Jeho používáním s tím souhlasíte. Rozumím