Add custom Scrollbar component

[vdjurdjevic]

Hi :)

First of all, this is the best UI library for the web out there! Worked with other material implementations (angular), and it was more pain than gain. This implementation is remarkable with its level of customizability. Finally, I can use ready-made components and make them fit the brand instead of every app being a Gmail clone :D

That being said, there is one small piece missing that I would love to see implemented. It's a custom scroll component. Native scrolls are ugly, especially Chrome's. There is awesome implementation out there: https://kingsora.github.io/OverlayScrollbars/#!overview It's great, works fine, but lacks css-in-js customizability support, and I don't like external css stylesheet that must be used with it. If we had a material version of this, with the same functionality but material UI API, life would be great :)

What do you think?

Benchmarks

• https://www.radix-ui.com/docs/primitives/components/scroll-area
• https://github.com/KingSora/OverlayScrollbars
• https://github.com/sakhnyuk/rc-scrollbars
• https://reshaped.so/docs/utilities/scroll-area
• The data grid virtual scrollbar, since [DataGrid] Sticky headers #10059

[oliviertassinari]

Thanks for opening this issue. We have had this request a couple of times. I have added the waiting for users upvotes tag. I'm closing the issue as we are not sure enough people are looking for such abstraction. So please upvote this issue if you are. We will prioritize our effort based on the number of upvotes.

[vdjurdjevic]

Just to add one more example. This one is more react friendly. It lacks Textarea support compared to KingSora's solution, but there is simple workaround. Here is the lib: https://xobotyi.github.io/react-scrollbars-custom/ and here is Textarea example: https://jsbin.com/hozedijeme/edit?html,css,js,output

[joshwooding]

Wow! Overlay scrollbars is really cool. It even has its own React wrapper. Unfortunately I got some weird scroll behaviour with react-scrollbar-custom.

[vdjurdjevic]

Overleyscrollbars is the best out there. React wrapper is good, but still requires using global stylesheet and customization with global theme. And also there is no textarea component. I will create my own in a few days with material stylea library and move styling in js. Also i will implement textarea compomemt and provide classes api for customizations.

[vdjurdjevic]

@oliviertassinari Would you consider adding this to lab package? Overlayscrollbars works great, I use it for one project. It has 70k download/week, it's maintained, author is working on v2 now. This would be just a tiny wrapper around it that would use material styles instead of global stylesheet, and would provide classes property for scroll parts customization. I have proof of concept working, just need to know if this will be considered to put more effort into this.

[oliviertassinari]

We have had this request in past under our custom work offering. We have declined it.

https://github.com/KingSora/OverlayScrollbars looks great.

If we do build it, we will probably make it available under the enterprise label, it won't be sustainable for us otherwise.

[vdjurdjevic]

I am not sure I understand. You decided to build it from scratch and put it under enterprise label, or use overlayscrollbars and put it under enterprise label?

[oliviertassinari]

No idea, my point being, if we want to solve this pain, we have to make it sustainable.

[vdjurdjevic]

Ok, I am building this thing anyway for my needs. I can offer it as a contribution if you are interested in it. With overlayscrollbars under the hood, it can't be more sustainable. Wrapper maintenance would be minimal. I am building this thing in near future anyway, and I will let you know when it's ready. If you want, we can add it to the lab package, or I can publish it as a separate package.

[oliviertassinari]

@vdjurdjevic If you are going with https://github.com/KingSora/OverlayScrollbars, sharing a codesandbox integration here should be enough.

[vdjurdjevic]

Do you mean for demonstration purposes? To show that it works, I can make codesandbox, but for people to use it, it has to be in some package. It's not just few lines of integration, I must create two react components for div and Textarea containers, and hook for using scroll instance for programmatic scrolling. Also, global styles must be implemented with '@global'.

[oliviertassinari]

@vdjurdjevic I mean for people that will land on this issue in the future. Also, if you feel that it would be better put into a published package, feel free to link your shot at the problem (under your own umbrella or company umbrella), we would be happy to reference it :)

[vdjurdjevic]

Do you mind if I call it mui-scrollable? Sims like a logical choice since it is coupled to material UI styling solution.

[vdjurdjevic]

Here it is :) Initial version is published: https://www.npmjs.com/package/@vdjurdjevic/material-scrollbars Feel free to check it out :)

[jie-chen]

Here it is :) Initial version is published: https://www.npmjs.com/package/@vdjurdjevic/material-scrollbars Feel free to check it out :)

Hi, the package is no more available. Any updates?

[vdjurdjevic]

Yeah, I have unpublished it, since it was not used almost at all, and overlayscrollbars author is working on a major update of the lib and MUI is migrating to emotion, so it makes no sense to keep it. If you need custom scrollbars, I would recommend: https://www.npmjs.com/package/rc-scrollbars