I am trying to implement RTL (Right-to-Left) support for scrolling using the ngx-scrollbar package in my Angular project. However, the scrollbar does not appear to function correctly in RTL mode.

I installed ngx-scrollbar in my Angular project using:

npm install ngx-scrollbar

I added the following code to my template to enable RTL mode:

<ng-scrollbar buttons [dir]="'rtl'"></ng-scrollbar>

Despite this, the scrollbar does not display correctly in RTL mode. It works fine in LTR (Left-to-Right) mode.

What I’ve Tried

1. I checked the ngx-scrollbar documentation and confirmed that the dir attribute should enable RTL mode.
2. I verified that my application supports RTL by setting other elements to dir=”rtl”, and they display as expected.
3. I tried using different browsers to rule out browser-specific issues.

stackblitz Demo Link

Environment
Angular: 18.0.0
CDK/Material: 18.0.2
Browser(s): chrome
Operating System (e.g. Windows, macOS, Ubuntu): Window