Skip to content

Customize width of rendered scrollbar #318

@GREsau

Description

@GREsau

Is your feature request related to a problem? Please describe.
We're using react-scrollbars-custom in a very small space-constrained UI, and would find it very useful to be able to set the scrollbar's width, (or height for the horizontal track/thumb). react-scrollbars-custom currently hard-codes this to 10px.

Describe the solution you'd like
A new prop, e.g. customScrollbarWidth :number = 10. It can't be called scrollbarWidth because that's already used to specify the width of native scrollbar.

Describe alternatives you've considered
It may be possible to achieve this already with the available props, but I haven't found a great way to do it. I'm currently working-around this with the following (for vertical scrollbar only):

<Scrollbar
  ref={scrollbarRef}
  trackYProps={{ style: { width: customWidth} }}
  wrapperProps={{ style: { right: scrollbarRef.current?.getScrollState().trackYVisible ? customWidth : 0 } }}
  disableTrackYWidthCompensation
>

This mostly works, the main problem is the rare case when the scrollbar shows/hides without my component being rerendered - this causes the custom wrapper indent to not update.

Please let me know if you'd be open to a PR making this change

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions