Custom scrollbar – jak řešíte?

6. 8. 2020 15:49:48

Ahoj,

jak řešíte realizaci custom scrollbaru, tak aby to bylo funkční ve většině prohlížečích i na touch screen devices?

Realizuji projekt, kde u jednoho divu potřebuji custom horizontal scroll bar. Nějak jsem si ho nastyloval pro Chrome, Firefox, Safari,... ale ::-webkit-scrollbar není všude podporován a na mobile touch devices nefunguje vůbec, takže jsem přišel pro radu jak to lze řešit.

::-webkit-scrollbar - CSS: Cascading Style Sheets | MDN

Máte nějaký ověřený workflow/js library pro custom scrollbar? Zkoušel jsem tento jQuery plugin http://jscrollpane.kelvinluck.com/ ale i přes to, že se setup zdá jednoduchý, tak se mi to nepodařilo zprovoznit.

Na ukázku zasílám část, kterou potřebuji vyřešit (scrollbar je visible od @media screen and (max-width: 767px))

https://marektomas.com/scroll/

6. 8. 2020 15:49:48

https://webtrh.cz/diskuse/custom-scrollbar-jak-resite#reply1459513

Smazaný účet hvLPwPN09D

(3 hodnocení)

6. 8. 2020 15:54:38

Opravdu tam potřebuješ ten horizontální scrollbar? Nešlo by to designově vyřešit jinak? třeba řazením pod sebe? Já ze srdce nenávidím jakýkoliv posuvníky do strany na mobilu. Láme mi to prsty.

6. 8. 2020 15:54:38

https://webtrh.cz/diskuse/custom-scrollbar-jak-resite#reply1459512

Tomáš Marek

(23 hodnocení)

6. 8. 2020 15:57:21

No já ho tam nepotřebuju a také nejsem fanoušek custom scrollbarů už jen kvůli tomu, že je s tím takový problém. Ale klient takový design dodal, tak zkouším. Když tam ve finále nebude, tak v pohodě. Vystačím si s overflow: auto;

6. 8. 2020 15:57:21

https://webtrh.cz/diskuse/custom-scrollbar-jak-resite#reply1459511

Dominik Hašek

(12 hodnocení)

6. 8. 2020 16:23:19

Na telefonu je to obzvlášť problém (obzvlášť u lidí kteří mají neaktualizovaný android a používají default prohlížeč). Je taky otázka jak se to bude chovat v safari (scrollbar se nezobrazuje vůbec, dokud nezačneš scrollovat).

Tohle by se snad mělo řešil sliderem a šipkama po stranách. Případně "dotted" navigací pod sliderem pokud šipky nechtějí. Tohle řešení je takový to "delší, ale za to horší cesta". To musel vymyslet nějaký "umělec" :-D

6. 8. 2020 16:23:19

https://webtrh.cz/diskuse/custom-scrollbar-jak-resite#reply1459510

TomasX

(4 hodnocení)

6. 8. 2020 16:30:09

nedělej to, nejsi reálně schopný zajistit funkčnost všude. Pak ti tam vběhne čtečka pro nevidomé nebo televize a jsi v háji. Custom scrollbar je realizovatelný v prostředí, kde máš nad klienty kontrolu.

6. 8. 2020 16:30:09

https://webtrh.cz/diskuse/custom-scrollbar-jak-resite#reply1459509

Pro odpověď se přihlašte.

Přihlásit