search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.56k stars 1.33k forks source link

Add custom Scrollbar component #510

Open vdjurdjevic opened 4 years ago

vdjurdjevic commented 4 years ago

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

oliviertassinari commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

vdjurdjevic commented 4 years ago

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 commented 4 years ago

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

vdjurdjevic commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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

vdjurdjevic commented 4 years ago

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

jie-chen commented 3 years ago

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 commented 3 years ago

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

tianyingchun commented 2 years ago

what progress of this feature?