search

MurhafSousli / ngx-scrollbar

Custom overlay-scrollbars with native scrolling mechanism
https://ngx-scrollbar.netlify.app/
MIT License
618 stars 99 forks source link

change direction to rtl or ltr #525

Closed omaraalia93 closed 1 year ago

omaraalia93 commented 1 year ago

how to change direction to RTL or LTR of the scrollbar when i change language without reload the document.

MurhafSousli commented 1 year ago

The scrollbar will automatically change direction when you add the attribute dir="rtl" on either html tag or body tag.

You can also change position using <ng-scrollbar position="invertY">

omaraalia93 commented 1 year ago

It didn't work as expected when I changed the 'dir' attribute on the HTML and body. I'm not sure why.

I fixed it by setting the 'dir' attribute on the main 'ng-scrollbar' element. I have 'ng-scrollbar' as the parent for the main router outlet. When I made this change, the inner 'ng-scrollbars' were also fixed.

xidedix commented 11 months ago

@MurhafSousli Adding the dir="rtl" attribute statically to the <html> tag is effective. However, if you change dir attribute on the fly it might not work as expected.

MurhafSousli commented 11 months ago

@xidedix It is working in the demo, as you can see I use the dir directive from the CDK BidiModule , maybe you can try the same

https://github.com/MurhafSousli/ngx-scrollbar/blob/b3d1421c0fe20e04709cd69329d5faa8d6ee17aa/projects/ngx-scrollbar-demo/src/app/example-x/example-x.component.html#L28-L44

See how you can toggle RTL mode in the demo https://ngx-scrollbar.netlify.app/

xidedix commented 11 months ago

@MurhafSousli Thank you for the clarification. I would like to bring to your attention that the dir attribute on the HTML element is effective with ng-scrollbar only for static pages, and it is not sufficient to dynamically alter its ltr/rtl behavior. In such cases, the [dir] directive comes in handy.