React-custom-scrollbars: RTL support?

Created on 11 Jul 2016 · 6Comments · Source: malte-wessel/react-custom-scrollbars

Hi there,

I was wondering if there is any plan for implementing RTL support?

question

Source

urosursej

👍5

Most helpful comment

you can use this option
renderView={props => (

);}

HamidBasri on 29 Jul 2019

🚀5 👍3

All 6 comments

Hey! What exactly do you need?

malte-wessel on 13 Jul 2016

@malte-wessel, i am too interested in RTL, this means that if you have direction="rtl" you will see both scrollbars - native & custom< because you hiding native scrollbar with margin right, but for RTL you need the opposite.

Hazantip on 20 Dec 2016

👍5

@malte-wessel currently, as @Hazantip mentioned, one of the scrollbars appears on the left in rtl. This results in 2 scrollbars showing in both sides.

I believe that the expected behavior is for the scrollbar(s) to appear in the right both in left to right and right to left because this is the default behavior on the web as I see it in every rtl supported site.

eyal1990 on 16 Jan 2017

👍1

you can use this option
renderView={props => (

);}

HamidBasri on 29 Jul 2019

🚀5 👍3

Hi @HamidBasri, I have the same issue,
renderView={props => (<div {...props} style={{ ...props.style, marginLeft: props.style.marginRight, marginRight: 0, }} /> );}
The solution that you proposed only hide the legacy scrollbar but the custom scrollbar is still showing on the right side instead of on the left.

Thanks!

ilanbd on 25 Feb 2021

Hi @HamidBasri, I have the same issue,
renderView={props => (<div {...props} style={{ ...props.style, marginLeft: props.style.marginRight, marginRight: 0, }} /> );}
The solution that you proposed only hide the legacy scrollbar but the custom scrollbar is still showing on the right side instead of on the left.

Thanks!

Hi @ilanbd, you should set bottom and top props too!

The default value I guess is 2px;

In my case I set it like:
style={{...scrollProps.style, left: '2px', bottom: '20px', top: '20px', borderRadius:'3px'}}`

Cheers!