Sharifullah Sharif Sharifullah Sharif - 2 months ago 25
AngularJS Question

ng-scrollbars: Right to left issue when horizantal scrolling

We are working on single page application. It is rendered in two languages. One is right to left and other is left to right.

For scrolling functionality we are using ng-scrollbars which is an Angularjs wrapper for malihu-custom-scrollbar-plugin. For languages with left to right format it works properly, but the problem is with the right to left languages.

The problem is when the horizontal scroll bar is dragged such that the content is scrolled to the opposite direction.

The following is how the scroll bar is positioned when not scrolled:

enter image description here

And this is how it looks like when scrolled to left and back to right. As you can see there is a huge space on the right side of the content area:

enter image description here

I am looking for solution from anybody who might have faced a similar issue. Thanks in advance.


My html is:

<div class="block" ng-scrollbars>
<!--My contents-->

My css is:


Plunker Reproducing Issue


The issue was in my css. I had set the direction css property to rtl for all elements.

* {
   direction: rtl;

With the directive ng-scrollbar adding the dir property solved the issue.

<div class="block" ng-scrollbars dir="rtl">
   <!-- your content here -->

Plunker Demo