fix(VirtualScroll): account for RTL in horizontal scroll (quasarframework#7549)

Author: pdanpdan

ui/src/components/virtual-scroll/QVirtualScroll.sass

@@ -3,8 +3,8 @@
     outline: 0
 
   &__padding
-    background: linear-gradient(transparent, transparent 20%, rgba(128, 128, 128, .03) 20%, rgba(128, 128, 128, .08) 50%, rgba(128, 128, 128, .03) 80%, transparent 80%, transparent)
-    background-size: 100% 50px
+    background: linear-gradient(transparent, transparent 20%, rgba(128, 128, 128, .03) 20%, rgba(128, 128, 128, .08) 50%, rgba(128, 128, 128, .03) 80%, transparent 80%, transparent) #{"/* rtl:ignore */"}
+    background-size: 100% 50px #{"/* rtl:ignore */"}
 
     .q-table &
       tr
@@ -30,5 +30,5 @@
         flex: 0 0 auto
 
       &__padding
-        background: linear-gradient(to left, transparent, transparent 20%, rgba(128, 128, 128, .03) 20%, rgba(128, 128, 128, .08) 50%, rgba(128, 128, 128, .03) 80%, transparent 80%, transparent)
-        background-size: 50px 100%
+        background: linear-gradient(to left, transparent, transparent 20%, rgba(128, 128, 128, .03) 20%, rgba(128, 128, 128, .08) 50%, rgba(128, 128, 128, .03) 80%, transparent 80%, transparent) #{"/* rtl:ignore */"}
+        background-size: 50px 100% #{"/* rtl:ignore */"}

ui/src/components/virtual-scroll/QVirtualScroll.styl

@@ -3,8 +3,8 @@
     outline: 0
 
   &__padding
-    background: linear-gradient(transparent, transparent 20%, rgba(128, 128, 128, .03) 20%, rgba(128, 128, 128, .08) 50%, rgba(128, 128, 128, .03) 80%, transparent 80%, transparent)
-    background-size: 100% 50px
+    background: linear-gradient(transparent, transparent 20%, rgba(128, 128, 128, .03) 20%, rgba(128, 128, 128, .08) 50%, rgba(128, 128, 128, .03) 80%, transparent 80%, transparent) /* rtl:ignore */
+    background-size: 100% 50px /* rtl:ignore */
 
     .q-table &
       tr
@@ -30,5 +30,5 @@
         flex: 0 0 auto
 
       &__padding
-        background: linear-gradient(to left, transparent, transparent 20%, rgba(128, 128, 128, .03) 20%, rgba(128, 128, 128, .08) 50%, rgba(128, 128, 128, .03) 80%, transparent 80%, transparent)
-        background-size: 50px 100%
+        background: linear-gradient(to left, transparent, transparent 20%, rgba(128, 128, 128, .03) 20%, rgba(128, 128, 128, .08) 50%, rgba(128, 128, 128, .03) 80%, transparent 80%, transparent) /* rtl:ignore */
+        background-size: 50px 100% /* rtl:ignore */

ui/src/mixins/virtual-scroll.js

@@ -31,11 +31,11 @@ function getScrollDetails (
 
   if (horizontal === true) {
     if (parent === window) {
-      details.scrollStart = window.pageXOffset || window.scrollX || document.body.scrollLeft || 0
+      details.scrollStart = Math.abs(window.pageXOffset || window.scrollX || document.body.scrollLeft || 0)
       details.scrollViewSize += window.innerWidth
     }
     else {
-      details.scrollStart = parentCalc.scrollLeft
+      details.scrollStart = Math.abs(parentCalc.scrollLeft)
       details.scrollViewSize += parentCalc.clientWidth
     }
     details.scrollMaxSize = parentCalc.scrollWidth
@@ -336,7 +336,7 @@ export default {
 
         this.__setScroll(
           scrollEl,
-          scrollPosition,
+          (this.$q.lang.rtl === true ? -1 : 1) * scrollPosition,
           this.virtualScrollHorizontal
         )