Material-ui: Custom Scrollbar Support

[antiwebbite]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I would love either native support for custom scrollbars or some guidance on how to get at components buried within other components (such as the <Menu> component within a <Select> component) to add external custom scrollbars.

Current Behavior

Currently, after searching the issues, there doesn't seem to be any talk about using custom scrollbars. (sorry if I missed it, I looked through about 4 pages) I am unable to find a way to wrap the <Menu> called from <Select> in my own custom scrollbar component.

Steps to Reproduce (for bugs)

1. Use <Select> with a fixed height menu and notice that it uses the browsers default scrollbar. For example, the Multiple Select demo.

Context

I have been able to wrap other Material-UI components in my custom scrollbar, but I am unable to get at components called from other components, such as <Select>, so some of my elements have custom scrollbars and others do not.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | beta.27 |
| React | 15 |
| browser | chrome |
| OS | OS X |

[oliviertassinari]

I would love either native support for custom scrollbars or some guidance on how to get at components buried within other components (such as the <Menu> component within a <Select> component) to add external custom scrollbars.

@antiwebbite I agree, I think that it would be great to have some guidance on how people can implement a custom scrollbar. Feel free to dig into this issue. We will accept a new documentation example for this 👍

[antiwebbite]

Great! For anyone else looking to do custom scrollbars, on our project we're using react-custom-scrollbars. It works as expected and is easy to use.

The problem is that it needs to wrap components to work. So for example...

<MenuList>
    <Scrollbar>
        {this.renderOptions()}
    </Scrollbar>
</MenuList>

This works great on it's own and we are using it in conjunction with the <Popover> component. The problem comes in when we don't have access to wrap the <MenuItems> or similar components without disrupting the function of the component. For example...

<Select {...whateverProps}>
    <Scrollbar>
        {months.map((month: string, i: number) => (
            <MenuItem key={month} value={i}>
                {month}
             </MenuItem>
        ))}
    <Scrollbar />
</Select>

Trying to insert <Scrollbar> in here doesn't work and it seems wrapping the <MenuItems> with anything breaks the <Select>. Here is an image showing the comparison of not wrapped vs wrapped.

A guide/documentation from better coders than I would be awesome and hopefully useful to the community.

Thanks!

[oliviertassinari]

The problem comes in when we don't have access to wrap the or similar components without disrupting the function of the component.

@antiwebbite This can be expected. We need to solve the menu before thinking of using it with the select component. Maybe Select.MenuProps.MenuListProps.component = Scrollbar can do the trick.

[antiwebbite]

That makes perfect sense. And worked for me. Thanks!

[mbrookes]

@antiwebbite Now that you've figured it out, and since you've effectively made a start in documenting it in your earlier comment, would you consider adding it to the docs?

[antiwebbite]

Absolutely, I'd love to contribute. Though, you should know I am a beginner coder. I've never contributed to a project before and am busy working at the moment. Is there a place you can point to that documents how I can add to the docs? Docs for the docs!?

[mbrookes]

@antiwebbite We don't have metadocs. 😄. I can guide you, but it depends on where in the docs this should go (whether a new or existing page). @oliviertassinari where did you have in mind?

[oliviertassinari]

where did you have in mind?

@mbrookes I don't know. It's generally discouraged to ship a custom implementation of the scroll. It's more for advanced users. Advanced users might not need a documentation second for this 🤔.
I guess a comment on this issue with the answer is enough.

@antiwebbite The DatePicker you are building look slick! Any plan to open source it? :)

[antiwebbite]

Already open-sourced! We're using react-day-picker and I just modified the styling a bit and added a custom "I'm Flexible" button for selecting dates.

[oliviertassinari]

It's good to know :).

[serle]

Could you rather add custom scrollbar support to the theme as ideally all scrollbars across all components that need scrolling should use the same custom scrollbar solution. This should not be for advanced users as scrollbars on desktop platforms are bulky and do not fit in at all with the material theme.

[adeelibr]

Can we add a Scrollbar component, which we can just include in the root of our application, and all it does is set a scrollbar style.

Something like this.

Scrollbar.js

function addCss(rule) {
   var css = document.createElement('style');
   css.type = 'text/css';
   if (css.styleSheet) css.styleSheet.cssText = rule; // Support for IE
   else css.appendChild(document.createTextNode(rule)); // Support for the rest
   document.getElementsByTagName("head")[0].appendChild(css);
}

const css  = `
::-webkit-scrollbar {
   height: 8px;
   width: 6px;
}
::-webkit-scrollbar-track-piece {
   background: #F0F0F0;
}
::-webkit-scrollbar-thumb:vertical,
::-webkit-scrollbar-thumb:horizontal {
   background: #E5E5E5;
   border-radius: 20px;
} 
`;

addCss(rule);

Then in order to consume it just include it at the top of your root file like;

import 'Scrollbar`; // this will inject custom scrollbar style

Another approach, is let's make a higher order component for scrollbar, so if someone wants a custom scrollbar for a particular section he can wrap that component with <Scrollbar /> The scrollbar component can have a a variant prop like Typography does and each variant can have a different scrolling style.

@oliviertassinari can there be a possibility of adding a Scrollbar component, i'd love to work on it.

[oliviertassinari]

@adeelibr This issue is about allowing people to use a custom scroll implementation. I don't think that we should implement one.

[adeelibr]

understood.

[nuragic]

Hi @oliviertassinari,

FYI the material spec is clear about scrolling... if there's the need to scroll, then components must always show the scrollbar (and it should be styled according to the theme, i.e. _themable_)... right now, scrolling style + behaviour is left to each browser, and you know what happens, it's inconsistent.

I understand that this specific issue would address a custom scroll implementation support (which I agree is for advanced users), but the default scroll implementation must be in place and aligned with the material spec, don't you think so?

[eps1lon]

@nuragic Could you add a link to the material spec concerning scrolling?

[nuragic]

@eps1lon I found the reference from https://github.com/angular/material/issues/5064#issuecomment-147436712

[nuragic]

The actual spec state _"When its content is scrollable, menus display scrollbars."_ but to be fair that's in the context of Menu's behavior https://material.io/design/components/menus.html#behavior

As they updated the spec website since the mentioned reference above, it's not so clear if the same would still apply for Lists. I believe so, but it would be great if they could clarify.

https://twitter.com/nuragic/status/1053207716280369152

[eps1lon]

It's also not saying that it should be themable. Don't get me wrong it would be nice to have a scrollbar in material design but scrollbars are pretty hard. I think first we have to improve our API so that users can apply a custom scroll component to content that might be scrollable. Then we can add examples of scrollbars in material design and then think about our own implementation.

[nuragic]

It's also not saying that it should be themable.

That was my own conclusion 😄; I believe it _should_ be themable in the case it'll be integrated in these components behavior... right? I mean, that applies to every component... when you add something new, you also add the corresponding CSS API...

scrollbars are pretty hard

Also agree… I'd say cumbersome rather than hard. I believe material-ui solved harder problems already 😃 Plus that's an already solved problem apparently (AFAIK this one works pretty well and it has a react version: https://github.com/Diokuz/baron)

To summarise, what's the best way to achieve custom (and themable) scrollbars right now? As described in the example above (plus using Select.MenuProps.MenuListProps.component = Scrollbar)?

Thanks!

[jimmycarlinco]

Any news on this? Is there a current working solution to have custom scrollbars for example the MUI Menu component?

[hcsgzh]

Hi @oliviertassinari ,
Is there a way to customize the scrollbar in material-ui to make the scollbar pretty? e.g. using
https://github.com/Grsmto/simplebar, https://github.com/Diokuz/baron or react-custom-https://github.com/rommguy/react-custom-scroll, https://github.com/utatti/perfect-scrollbar.

Thanks.

[oliviertassinari]

@hcsgzh I have no idea, I have never tried it. If you figure out a solution, we would be happy to document it.

[Muini]

Hi,

Select.MenuProps.MenuListProps.component = Scrollbar trick did not work for me. I'm using react-scrollbars-custom. It's putting the width & height of the dropdown at almost zero, it does not keep the dimensions correclty.

[bhldev]

Hi,

Select.MenuProps.MenuListProps.component = Scrollbar trick did not work for me. I'm using react-scrollbars-custom. It's putting the width & height of the dropdown at almost zero, it does not keep the dimensions correclty.

Hi @Muini,

You can set the width and the height of the dropdown through the props. For example with paper there's className and the useStyles hook. If you are using REM units to position everything on the page, this should be trivial. If not it will be more difficult. I simply have as the only child of popover and set the width and height and left property of the

GL