zefoy / ngx-perfect-scrollbar

Angular wrapper library for the Perfect Scrollbar
MIT License
521 stars 116 forks source link

RTL support for ngx-perfect-scrollbar #180

Open sosharma1403 opened 6 years ago

sconix commented 6 years ago

I am not too keen on adding rtl support in the wrapper, it really should be added to the perfect-scrollbar. For it there is already an issue to fix the RTL support.

kyoz commented 6 years ago

@sosharma1403 Since the perfect-scrollbar doesn't support it yet (There's an PR already since 2017, hope they'll merge it soon). And this is how i doing:

Add these in perfect-scrollbar css (after .psrail-y and .psthumb-y):

*[dir=rtl] .ps__rail-y {
    right: unset !important;
    left: 0px !important;
}

*[dir=rtl] .ps__thumb-y {
    right: unset !important;
    left: 2px !important;
}

I do set dir attribute to the container div. so that's my css, you can adapt it to work properly for you.

P/s: don't forget to use to use suppressScrollX to prevent glitchy behavior.

Hope it help

MRebati commented 5 years ago

there is just a quick work-around on this one:

.ps{
    direction: ltr;
}

.ps-content{
    direction: rtl;
}

otherwise 5px of the content on the right doesn't show.