xobotyi/react-scrollbars-custom

Customize width of rendered scrollbar

GREsau opened this issue · 0 comments

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