feat: support smooth and auto scrollBehavior prop (#220)

Co-authored-by: Luca Ban <mesqueeb@users.noreply.github.com>

Author: hunterliu1003

README.md

@@ -36,6 +36,7 @@ npm install vue-virtual-scroll-grid
 | `pageProviderDebounceTime` | Debounce window in milliseconds on the calls to `pageProvider`                    | `number`                                                       | Optional, an integer greater than or equal to 0      |
 | `pageSize`                 | The number of items in a page from the item provider (e.g. a backend API)         | `number`                                                       | Required, an integer greater than or equal to 1      |
 | `scrollTo`                 | Scroll to a specific item by index                                                | `number`                                                       | Optional, an integer from 0 to the `length` prop - 1 |
+| `scrollBehavior`           | The behavior of `scrollTo`. Default value is `smooth`                             | `smooth` | `auto`                                              | Optional, a string to be `smooth` or `auto`         |
 
 Example:
 

package-lock.json

@@ -85,6 +85,12 @@ export default defineComponent({
       required: false,
       validator: (value: number) => Number.isInteger(value) && value >= 0,
     },
+    scrollBehavior: {
+      type: String as PropType<"smooth" | "auto">,
+      required: false,
+      default: "smooth",
+      validator: (value: string) => ["smooth", "auto"].includes(value)
+    }
   },
   setup(props) {
     // template refs
@@ -114,7 +120,7 @@ export default defineComponent({
     onUpdated(
       once(() => {
         scrollAction$.subscribe(([el, top]: ScrollAction) => {
-          el.scrollTo({ top, behavior: "smooth" });
+          el.scrollTo({ top, behavior: props.scrollBehavior });
         });
       })
     );

src/Grid.vue

@@ -7,6 +7,7 @@
     :pageProvider="pageProvider"
     :pageProviderDebounceTime="0"
     :scrollTo="scrollTo"
+    :scrollBehavior="scrollBehavior"
     :class="$style.grid"
   >
     <template v-slot:probe>
@@ -44,7 +45,7 @@ import Grid from "../Grid.vue";
 import Header from "./Header.vue";
 import Control from "./Control.vue";
 import ProductItem from "./ProductItem.vue";
-import { length, pageSize, pageProvider, scrollTo } from "./store";
+import { length, pageSize, pageProvider, scrollTo, scrollBehavior } from "./store";
 
 export default defineComponent({
   name: "App",
@@ -54,6 +55,7 @@ export default defineComponent({
     pageSize,
     pageProvider,
     scrollTo,
+    scrollBehavior,
   }),
 });
 </script>

src/demo/App.vue

@@ -79,17 +79,46 @@
         :class="$style.number"
       />
     </div>
+
+    <div :class="$style.scrollBehaviorProvider">
+      <p :class="$style.scrollBehavior">Scroll Behavior:</p>
+
+      <div :class="$style.radioList">
+        <label for="smooth" :class="$style.radioLabel">
+          <input
+            type="radio"
+            id="smooth"
+            value="smooth"
+            v-model="scrollBehavior"
+            :class="$style.radio"
+          />
+          Smooth
+        </label>
+
+        <label for="auto" :class="$style.radioLabel">
+          <input
+            type="radio"
+            id="auto"
+            value="auto"
+            v-model="scrollBehavior"
+            :class="$style.radio"
+          />
+          Auto
+        </label>
+      </div>
+    </div>
+    
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { collection, length, pageSize, scrollTo } from "./store";
+import { collection, length, pageSize, scrollTo, scrollBehavior } from "./store";
 
 export default defineComponent({
   name: "Control",
   setup: () => {
-    return { length, pageSize, collection, scrollTo };
+    return { length, pageSize, collection, scrollTo, scrollBehavior };
   },
 });
 </script>
@@ -109,6 +138,7 @@ export default defineComponent({
     "length pageProvider" auto
     "pageSize pageProvider" auto
     "scrollTo pageProvider" auto
+    "scrollBehavior pageProvider" auto
     / 2fr 1fr;
   place-items: center stretch;
   grid-gap: 1.5rem;
@@ -134,6 +164,14 @@ export default defineComponent({
   grid-area: scrollTo;
 }
 
+.scrollBehaviorProvider {
+  grid-area: scrollBehavior;
+  place-self: stretch;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+}
+
 .radioList {
   flex: 1 1 auto;
   display: flex;
@@ -171,19 +209,19 @@ export default defineComponent({
   font-weight: 700;
 }
 
-.category {
+.category, .scrollBehavior {
   font-weight: 700;
   margin-bottom: 1rem;
 }
 
 @media (min-width: 760px) {
   .root {
     grid-template:
-      "length pageSize pageProvider scrollTo" auto
-      / 2fr 2fr 2fr 1fr;
+      "length pageSize pageProvider scrollTo scrollBehavior" auto
+      / 2fr 2fr 2fr 1fr 1fr;
   }
 
-  .category {
+  .category, .scrollBehavior {
     margin-bottom: 0.5rem;
   }
 

src/demo/Control.vue

@@ -5,6 +5,7 @@ import { curry, prop } from "ramda";
 export const length = ref<number>(1000);
 export const pageSize = ref<number>(40);
 export const scrollTo = ref<number | undefined>(undefined);
+export const scrollBehavior = ref<string>("smooth");
 
 export type Collection = "" | "all-mens" | "womens-view-all";
 export const collection = ref<Collection>("");