Does anyone have any experience setting up a custom scrollbar in Elm? The design in our team is understandably keen to get away from the clunky default scroll bars but I believe that CSS doesn’t have fully supported scrollbar styling rules yet so it seems that a more custom solution is required.
I am tempted to try looking into rolling an Elm solution though I’m not sure exactly what is possible yet. Does anyone have any experience they could share here?
I remember throwing a bunch of css rules on it and it looked nice in the browsers I tested with. Good enough for my project at the time, especially considering the fallback is the native scrollbar.
Have you seen this page? https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
It might be doable in CSS, depending on your design and what environments you need to support.
Thank you but the compatibility table on that page indicates quite poor support at the moment. I need to support all major browsers. The caniuse page seems promising but most of the green blocks seem to come from non-standard features. Though I guess something could be cobbled together that uses the various options.
The presence of the JS libraries which focus on scroll events and custom scroll bar left me thinking that that was the most reasonably route.
Yes that’s correct. I was thinking of the “See also” links on the page when I evaluated browser support. But just as you found via Caniuse, that means using various non-standard ways for each browser.
Personally I would still explore the (hacky) CSS ways first, because while a custom scrollbar gives you complete control, it feels much harder to get working just like users expect.
Sorry for derailing your thread. You asked for experience on custom scrollbars but has not received any answers.
I think the best approach would be to render your own scrollbar over the top of the native one with
pointer-events: none. To calculate the height and position use
https://package.elm-lang.org/packages/elm/html/latest/Html-Events#on with a custom decoder to fetch https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop and https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight etc.
That sounds so clever!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.