diff --git a/package.json b/package.json
index 45adf0f..67a6843 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
   "dependencies": {
     "hyperlist": "^1.0.0-beta",
     "lodash": "^4.17.5",
+    "normalize-scroll-left": "^0.1.2",
     "sortablejs": "^1.7.0"
   },
   "config": {
diff --git a/src/style.js b/src/style.js
index 6fca086..4e06847 100644
--- a/src/style.js
+++ b/src/style.js
@@ -4,6 +4,7 @@ import {
     linkProperties,
     throttle
 } from './utils';
+import { detectScrollType } from 'normalize-scroll-left';
 
 export default class Style {
     constructor(instance) {
@@ -48,14 +49,28 @@ export default class Style {
             this._settingHeaderPosition = true;
 
             requestAnimationFrame(() => {
-                const left = -e.target.scrollLeft;
 
-                $.style(this.header, {
-                    transform: `translateX(${left}px)`
-                });
-                $.style(this.footer, {
-                    transform: `translateX(${left}px)`
-                });
+                const scrollLeft = e.target.scrollLeft;
+                const direction = getComputedStyle(document.getElementsByTagName('body')[0]).direction;
+                if (direction === 'rtl' && detectScrollType() === 'default') {
+                    const scrollWidth = e.target.scrollWidth;
+                    const clientWidth = e.target.clientWidth;
+                    $.style(this.header, {
+                        transform: `translateX(${scrollWidth - clientWidth - scrollLeft}px)`
+                    });
+                    $.style(this.footer, {
+                        transform: `translateX(${scrollWidth - clientWidth - scrollLeft}px)`
+                    });
+                }
+                else {
+                    $.style(this.header, {
+                        transform: `translateX(${-scrollLeft}px)`
+                    });
+                    $.style(this.footer, {
+                        transform: `translateX(${-scrollLeft}px)`
+                    });
+                }
+
                 this._settingHeaderPosition = false;
             });
         });