Custom Scrollbar in Elm

Learn
1

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.

CSS Tricks has done an article here: https://css-tricks.com/the-current-state-of-styling-scrollbars/ Written in Nov '18 but updated more recently. They reference some Javascript libraries and a blog post:

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?

1 Like
2

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.

3

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.

4

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.

5

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.

1 Like
6

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.

2 Likes
7

That sounds so clever!

You probably want to measure the width of the native scrollbar using JavaScript and make yours that wide or less (it should be possible to cut off some of it with overflow:hidden on a parent). Also note that the width can even be 0 on MacBooks – until a mouse is plugged in, usually (so the scrollbar width even changes over time!).

1 Like
8

Just saw this on Hackernews: https://www.filamentgroup.com/lab/scrollbars/

2 Likes
9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.