feat(QScrollArea): New method -> setScrollPercentage quasarframework#7696

Author: rstoenescu

ui/dev/src/pages/components/scroll-area.vue

@@ -57,6 +57,9 @@
     <q-btn @click="scroll2">
       Scroll to 525 (animated)
     </q-btn>
+    <q-btn @click="scroll3">
+      Scroll to 90%
+    </q-btn>
 
     <div style="height: 1000px" />
   </div>
@@ -105,6 +108,9 @@ export default {
     },
     scroll2 () {
       this.$refs.scroll.setScrollPosition(525, 1000)
+    },
+    scroll3 () {
+      this.$refs.scroll.setScrollPercentage(0.9, 1000)
     }
   }
 }

ui/src/components/scroll-area/QScrollArea.js

@@ -158,6 +158,13 @@ export default Vue.extend({
       fn(this.$refs.target, offset, duration)
     },
 
+    setScrollPercentage (percentage, duration) {
+      this.setScrollPosition(
+        percentage * (this.scrollSize - this.containerSize),
+        duration
+      )
+    },
+
     __updateContainer ({ height, width }) {
       let change = false
 

ui/src/components/scroll-area/QScrollArea.json

@@ -161,6 +161,24 @@
           "examples": [ 300 ]
         }
       }
+    },
+
+    "setScrollPercentage": {
+      "desc": "Set scroll position to a percentage (0.0 < x < 1.0) of the total scrolling size; If a duration (in milliseconds) is specified then the scroll is animated",
+      "params": {
+        "offset": {
+          "type": "Number",
+          "desc": "Scroll percentage (0.0 < x < 1.0) of the total scrolling size",
+          "required": true,
+          "examples": [ 220 ]
+        },
+        "duration": {
+          "type": "Number",
+          "desc": "Duration (in milliseconds) enabling animated scroll",
+          "examples": [ 300 ]
+        }
+      },
+      "addedIn": "v1.13.2"
     }
   }
 }