Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Customize width of rendered scrollbar #318

Open
GREsau opened this issue Nov 17, 2022 · 0 comments
Open

Customize width of rendered scrollbar #318

GREsau opened this issue Nov 17, 2022 · 0 comments

Comments

@GREsau
Copy link

GREsau commented Nov 17, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant