question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom Scrollbar Support

See original GitHub issue
  • 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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:6
  • Comments:27 (17 by maintainers)

github_iconTop GitHub Comments

29reactions
serlecommented, May 31, 2018

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.

12reactions
antiwebbitecommented, Jan 20, 2018

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.

comparison

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

Thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS scrollbar styling | Can I use... Support tables for HTML5 ...
1 Only supports styling scrollbar colors through proprietary prefixed properties, no other properties to define the scrollbar's appearance.
Read more >
How To Create a Custom Scrollbar - W3Schools
Learn how to create a custom scrollbar with CSS. Custom Scrollbars. Custom Scrollbar Example. Note: The -webkit-scrollbar is not supported in Firefox or...
Read more >
Custom scrollbar cross-browser support - Stack Overflow
It is better to use javascript for scrollbars since they are not fully supported by all browsers. those libraries are examples to use:....
Read more >
How To Style Scrollbars with CSS - DigitalOcean
In this tutorial, you will learn how to use CSS to customize scrollbars to support modern browsers.
Read more >
scrollbar - CSS-Tricks
This almanac entry is an overview, for a more complete breakdown of working with custom scrollbars, please read this CSS-Tricks article.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found