Is there an example of how to actually customize the scrollbars?

[MythicalFish]

I've implemented this in my project, and it "works" ...in that I can see lots of stuff happening in the DOM, and I'm also using onScrollFrame which is neat... but how am I meant to actually customize the scrollbars?

I can see that there are props like "renderThumbVertical" which I can use, but it seems I would need to hook up all the position props & do all kinds of work to do something which I assumed was the main purpose of this package...

At the very least a fully working example would be nice. :)

[MythicalFish]

Maybe it just doesn't work for me, I can see other people have seemingly implemented it correctly with just a div which inherits props & styling: https://github.com/venicegeo/eventkit-cloud/blob/d9a83cbacdcaa0d84a07e35f7467dac89a289876/eventkit_cloud/ui/static/ui/app/components/CustomScrollbar.js

But when I do this, they are just static divs with display: none; (albeit with the styling I added), and the native scrollbars are still showing.

[teod]

it doesn't work for me as well for some reason, even if I'm trying to not pass any custom styles / classNames:

import React, { Component } from 'react'
import CustomScrollbars from 'react-custom-scrollbars/lib/Scrollbars'

export default class Scrollbars extends Component<*> {
  renderTrackVertical = ({ style, ...props }: *) => <div style={style} {...props} />
  renderThumbVertical = ({ style, ...props }: *) => <div style={style} {...props} />

  render() {
    return (
      <CustomScrollbars
        renderTrackVertical={this.renderTrackVertical}
        renderThumbVertical={this.renderThumbVertical}
        {...this.props}
      />
    )
  }
}

[MythicalFish]

Seems to be working for me now, maybe I did get something wrong... One thing which helped was disabling my touchpad scrolling, which makes the scrollbars always visible, and you can inspect & debug the HTML more easily. :)

[teod]

yeah, it started working for me as well, ... did nothing, besides removing renderTrackVertical I can go without it anyway

[evercool]

How did you make it work? I am unable to style my scrollbars nor apply some of another functionality such as disable autohide. When I take a look at html sended from my server, there are rendered these divs, but with display:none; height: 0. My code looks like this:

<Scrollbars
    renderTrackVertical={({ style, ...props }: any) => (
        <div
            style={{ ...style, backgroundColor: 'red' }}
            {...props}
        />
    )}
    renderThumbVertical={({ style, ...props }: any) => (
        <div
            style={{ ...style, backgroundColor: 'red' }}
            {...props}
        />
    )}```

[MythicalFish]

Here's my working code:

import React from 'react';
import { Scrollbars } from 'react-custom-scrollbars';

class ScrollArea extends React.PureComponent {
  trackV = ({ style, ...props }) => (
    <div className="track track-vertical" style={style} {...props} />
  );
  thumbV = ({ style, ...props }) => (
    <div className="thumb thumb-vertical" style={{ ...style }} {...props} />
  );
  trackH = ({ style, ...props }) => (
    <div className="track track-horizontal" style={style} {...props} />
  );
  thumbH = ({ style, ...props }) => (
    <div className="thumb thumb-horizontal" style={style} {...props} />
  );
  render() {
    const sProps = {
      renderTrackHorizontal: this.trackH,
      renderThumbHorizontal: this.thumbH,
      renderThumbVertical: this.thumV,
      renderTrackVertical: this.trackV,
      autoHide: false,
    };
    return <Scrollbars {...sProps}>{this.props.children}</Scrollbars>;
  }
}

export default ScrollArea;

Note: I'm styling the scrollbars using className (works well, although some !important attributes are necessary).

[evercool]

Hmm.. I've found out, that it is not working only on OSX and that is issue #110

[worldwideaman]

My code is working with renderThumbVertical but when I try to use the renderTrackVertical I only get static divs with display: none property.

I am trying to apply a custom class on the scroll div track so that I can change its width on hover of the scroll bar.

[MythicalFish]

I found out that this only works with the trackpad disabled. :|

[vanya2h]

Any updates ?

[MohamedLamineAllal]

Hi there. If any one is stuck on that! You can use the bellow styling

(in SCSS)

.track-vertical {
                        top: 2px;
                        bottom: 2px;
                        right: 2px;
                        border-radius: 3px;
                        background: rgba(255, 255, 255, 0.111);

                        .thumb-vertical {
                            position: relative;
                            display: block;
                            width: 100%;
                            cursor: pointer;
                            border-radius: inherit;
                            background-color: rgba(123, 154, 255, 0.418); // changed the color
                        }

                    }

                    .track-horizontal {
                        position: absolute;
                        height: 6px;
                        right: 2px;
                        bottom: 2px;
                        left: 2px;
                        border-radius: 3px;

                        .thumb-horizontal {
                            position: relative;
                            display: block;
                            height: 100%;
                            cursor: pointer;
                            border-radius: inherit;
                            background-color: rgba(125, 149, 255, 0.993); // changed the color
                        }
                    }

                    .view {
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        right: 0px;
                        bottom: 0px;
                        overflow: scroll;
                        margin-right: -15px;
                        margin-bottom: -17px !important; // changed from -15px  (default) to -17px (native scrollbar had a portion visible) 
                    }

This is the style that is applied by default when we don't manually render the elements. The passed props will handle updating the dimension of the thumb.

I don't know if that was intentional. So we can customize the way we want, and that we will not have to use !important in our css (it seems like that!).

For .view element. the style are passed, if you want to override (as i needed myself (margin: -17px, instead of -15px)) then just css rules. use !important. Or use inline css.

The above is SCSS. Here bellow the compiled CSS:

(in CSS)

.track-vertical {
  top: 2px;
  bottom: 2px;
  right: 2px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.111);
}
.track-vertical .thumb-vertical {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  border-radius: inherit;
  background-color: rgba(123, 154, 255, 0.418);
}

.track-horizontal {
  position: absolute;
  height: 6px;
  right: 2px;
  bottom: 2px;
  left: 2px;
  border-radius: 3px;
}
.track-horizontal .thumb-horizontal {
  position: relative;
  display: block;
  height: 100%;
  cursor: pointer;
  border-radius: inherit;
  background-color: rgba(125, 149, 255, 0.993);
}

.view {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: scroll;
  margin-right: -15px;
  margin-bottom: -17px !important;
}

[Jeslopov]

Hi, @MohamedLamineAllal, can you be more explicit about your workaround? I've been tracking this issue all day long and nothing, I'm on a Mac and: renderTrackVertical={props => <div {...props} className="track-vertical"/>} doesn't work at all (referenced in #110 ), tried everything, my last hope was to fix the styles by Css. But I don't know where I suppose to put the code you are posting. Thxs.