title: ng-scrollbars: Right to left issue when horizantal scrolling
body: <p>We are working on single page application. It is rendered in two languages. One is right to left and other is left to right.</p>
  
  <p>For scrolling functionality we are using <a href="https://github.com/iominh/ng-scrollbars" rel="nofollow noreferrer">ng-scrollbars</a> which is an Angularjs wrapper for <a href="http://manos.malihu.gr/jquery-custom-content-scroller/#methods-section" rel="nofollow noreferrer">malihu-custom-scrollbar-plugin</a>. For languages with left to right format it works properly, but the problem is with the right to left languages. </p>
  
  <p><strong>The problem is when the horizontal scroll bar is dragged such that the content is scrolled to the opposite direction</strong>.</p>
  
  <p>The following is how the scroll bar is positioned when not scrolled:</p>
  
  <p><a href="https://i.stack.imgur.com/VOj8A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VOj8A.png" alt="enter image description here"></a></p>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/XNixB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XNixB.png" alt="enter image description here"></a></p>
  
  <p>I am looking for solution from anybody who might have faced a similar issue. Thanks in advance.</p>
  
  <h2>Update</h2>
  
  <p>My html is:</p>
  
  <pre><code>&lt;div class="block" ng-scrollbars&gt;
      &lt;!--My contents--&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My css is: </p>
  
  <pre><code>*{
      direction:rtl;
   }
  </code></pre>
  
  <h2><a href="https://plnkr.co/edit/kFQg9ap6hF3HQuWsSQTU" rel="nofollow noreferrer"><em>Plunker Reproducing Issue</em></a></h2>