Autor Zpráva
ondra15
Profil
Dobrý den, rád bych se zeptal, jak docílím stylování posuvníku ve všech prohlížecích. V IE tento kód fungu, v mozille a chrome zdaleka ne.
body, html  {
scrollbar-track-color: #fff;
scrollbar-face-color: #fff;
scrollbar-highlight-color: #fff;
scrollbar-3dlight-color: #fff;
scrollbar-darkshadow-color: #fff;
scrollbar-shadow-color: #fff;
scrollbar-arrow-color: red; }


Díky...
panther
Profil
ondra15:
ve všech prohlížečích posuvníky, naštěstí, stylovat nejdou.
habendorf
Profil
Pokud vím, jde to jen v IE a v Opeře, pokud je to povoleno.
Davex
Profil
Ještě jde stylovat posuvník ve WebKitu, který na to má vlastní systém - viz http://webkit.org/blog/363/styling-scrollbars/, ale raději bych se o to ani nepokoušel.
habendorf
Profil
A co se týče IE a Opery (webkit nevím), jde myslím stylovat jen hlavní posuvník okna.
drvaca
Profil
Nějak jde i ve Firefoxu. Nevím čím to je, zdrojáky jsem nezkoumal, ale jeden web mi nedávno zobrazil tmavě šedý posuvník. U docela seziózní firmy, to mě podivilo. Donedávna jsem myslel, že stylovaný posuvník je výhradou webů malých dětí hostovaných u ICčka. . .
habendorf
Profil
drvaca:

Ve FF to nejde. Pokud jsi to viděl, nebyl to scrollbar, ale nějaká JS opičárna.
panther
Profil
drvaca:
různé prohlížeče, které toto více či méně podporují, mohou zobrazovat stylované posuvníky různě.

Bývá k vidění i vytvoření JavaScriptového posuvníku, který může vypadat téměř jakkoliv a všude stejně, nevýhody jsou, myslím, zřejmé
habendorf
Profil
panther:
nevýhody jsou, myslím, zřejmé

Mně ne. Poučíš mě prosím?
margin
Profil *
drvaca:
Nevím čím to je, zdrojáky jsem nezkoumal, ale jeden web mi nedávno zobrazil tmavě šedý posuvník.
Mohl to způsobovat tento meta tag:
<meta http-equiv="MSThemeCompatible" content="no">

Starší verze Firefoxu dokážou při použití tohoto meta tagu zmršit posuvníky ještě více.
habendorf
Profil
panther:

„nevýhody jsou, myslím, zřejmé“

Mně ne. Poučíš mě prosím?

Druhý pokus.
panther
Profil
habendorf:
promiň, že jsem tě přeskočil :-)

Možná se mýlím, měl bys nějaký JS posuvník, který by se choval za všech okolností jako ten klasický? Asi mám smůlu, ale zatím jsem na takový na žádném webu, kde byly pokusy o JS posuvníky, ani na webech, kde byly ty scripty ke stažení, neviděl.

U většiny nabízených řešení, co jsem měl možnost vidět, nejprve odscrolloval ten na <html>, až pak ten javascriptový v contentu. Na jiných, a taky to bylo vícero scriptů, se chovaly jako tento - různě pozicované, apod., takže když si před ně doplníš nějaký text, přestanou fungovat (jak na kolečko myši, tak na čapnutí myší za jezdce).

Neříkám, že nejde udělat dobře, jistě jde, ale pochybuji, že ondra15 si všechny možné situace, které mohou nastat, vyzkouší a vybere si ten správný, který bude fungovat všude.

Druhá, a neméně podstatná, věc je vkus a zvyk. Uživatelé jsou na defaultní prohlížečový posuvník, který vidí všude, zvyklí. Ano, dalo by se říci, že nejsem ani příznivcem stylování „<select>ů“, jestli tě zajímá tohle. IMHO to snižuje přehled uživatele na té dané stránce, minimálně musí přemýšlet.


Jestli chceš, můžeš mi najít nějaké JS řešení, které bude fungovat správně, třeba mě přesvědčíš. A pak před něj zkus postavit BFU, co ti na to řekne, co si bude na první pohled myslet o stylovaném posuvníku/selectu (ideálně, jak se to dnes dělá, v barvách webu, že je snadno k přehlédnutí).
habendorf
Profil
panther:
Jestli chceš, můžeš mi najít nějaké JS řešení, které bude fungovat správně, třeba mě přesvědčíš.

Já tě nechci o ničem přesvědčovat. Mně nebyly zřejmé ty nevýhody, tak jsem se zeptal ;o)

Poměrně slušný je flexcroll, k vidění třeba zde: http://www.xoprivate.com/accommodation/shahpura-house/

Z tvých požadavků:

nejprve odscrolloval ten na <html>, až pak ten javascriptový v contentu“ - tento je ok
takže když si před ně doplníš nějaký text, přestanou fungovat (jak na kolečko myši, tak na čapnutí myší za jezdce)“ - tento je ok

Uživatelé jsou na defaultní prohlížečový posuvník, který vidí všude, zvyklí.“ - tohle uznávám a souhlasím

Ano, dalo by se říci, že nejsem ani příznivcem stylování ‚<select>ů‘, jestli tě zajímá tohle.“ - ne, to mě ani moc nezajímá :o) BTW, také nejsem příznivcem stylování "selectů".

Ještě k tomuto konkrétnímu případu - vím, že bez JS nefunguje, ale nebyl by to problém napsat tak, aby se overflow:hidden doplňoval skriptem a jinak byl nastaven na auto. Takže bez JS by se zobrazil klasický scrollbar.
panther
Profil
habendorf:
to, že nefunguje bez JS, je jasná chyba, ale zároveň vím, že to je to nejmenší, co se dá dodělat.

Poměrně slušný je flexcroll, k vidění třeba zde:
kouknu se na něj, díky za tip.

Při první ohledání mi na něm vadí - stejně jako u většiny ostatních - jedna věc; když scroluješ pomalu (typicky, když čteš) dolů/nahoru, v momentě, kdy jsi onmouseover nad tím JS scrollovacím boxem, odscroluje se do strany a pak teprve pokračuje scrollování stránky. Kurzor mám na středu stránky, což není nikterak neobvyklá pozice. Tohle normální horizontální posuvníky nedělají, alespoň na touchpadu s vertikálním i horizontálním skrolováním ne.
Nevím, jestli by i tohle šlo nějakým jednodušším zásahem doladit. Pokud ne, ani toto řešení není dokonalé :-)
habendorf
Profil
Test

wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww


Musel jsem si zkusit, jak se vlastně chová normální horiz. posuvník :o)

Mně se kolečkem myši teda neskroluje vůbec.
panther
Profil
habendorf:
že to jsi ty, oprášil jsem myšku, ani ta nescroluje do stran (na tomto tvém testu), zatímco na odkázaném webu ano.

Ono asi JavaScriptem nejde odchytnout, jakým směrem scrolluješ, ne? Ten script jsem nezkoumal, IMHO to funguje na nějakém onmouseover && scroll a dopočítávání top/bottom, dokud není == 0.
Chamurappi
Profil
Reaguji na habendorfa:
Mně se kolečkem myši teda neskroluje vůbec.
A o to právě jde.

Mně ne. Poučíš mě prosím?
JavaScriptový posuvník nemůže plnohodnotně nahradit ten skutečný, protože autor stránky nikdy stoprocentně neví, jak by se ten skutečný choval, kdyby tam byl. Může ho jen (složitě) napodobovat. Kouknu-li se na odkázanou stránku v Exploreru 7:
1) Posuvník je jinak velký než opravdový. Velikost je docela podstatné systémové nastavení (na rozdíl od barvy) a skript by ji mohl pokusně zjistit.
2) Nefunguje na něm kontextové menu.
3) Při hýbání s posuvníkem se zruší označení textu.
4) Pokud mám označeno něco uvnitř i něco venku, nejde s posuvníkem pořádně pohnout (protože přetahuji výběr).
5) Skript, krom toho, že roluje do stran, i když roluji nahoru/dolu (což JS skutečně zjistit nedokáže), nerespektuje hodnotu z event.wheelDelta a rozhoduje se jen podle toho, jestli je větší/menší než nula. Chytřejší myši posílají informaci o tom, jak moc/rychle jsem kolečkem otočil, takže rolování na skutečném posuvníku je jemnější.
6) Není ošetřen autoscrolling (tedy ta věc, když uvnitř stisknu prostřední tlačítko a podle pozice kurzoru se samo roluje). Ve Firefoxu jde tato funkce vypnout a JS neumí zjistit, jestli je vypnutá.
7) Pokud má ta horizontálně rolující věc focus, nemůžu klávesnicí rolovat stránku vertikálně.
habendorf
Profil
Chamurappi:

Vyčerpávající odpověď, dík ;o)

Vaše odpověď

Mohlo by se hodit

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: