feat: new disableTransform prop to use top/left instead of translate (#138)

Co-authored-by: Guillaume Chau <[email protected]>

Author: AousAnwar

packages/vue-virtual-scroller/src/components/RecycleScroller.vue

@@ -27,15 +27,21 @@
       :class="listClass"
     >
       <component
-        ref="items"
         :is="itemTag"
         v-for="view of pool"
+        ref="items"
         :key="view.nr.id"
-        :style="ready ? {
-          transform: `translate${direction === 'vertical' ? 'Y' : 'X'}(${view.position}px) translate${direction === 'vertical' ? 'X' : 'Y'}(${view.offset}px)`,
-          width: gridItems ? `${direction === 'vertical' ? itemSecondarySize || itemSize : itemSize}px` : undefined,
-          height: gridItems ? `${direction === 'horizontal' ? itemSecondarySize || itemSize : itemSize}px` : undefined,
-        } : null"
+        :style="ready
+          ? [
+            (disableTransform
+              ? { [direction === 'vertical' ? 'top' : 'left'] : `${view.position}px`, willChange: 'unset' }
+              : { transform: `translate${direction === 'vertical' ? 'Y' : 'X'}(${view.position}px) translate${direction === 'vertical' ? 'X' : 'Y'}(${view.offset}px)` }),
+            {
+              width: gridItems ? `${direction === 'vertical' ? itemSecondarySize || itemSize : itemSize}px` : undefined,
+              height: gridItems ? `${direction === 'horizontal' ? itemSecondarySize || itemSize : itemSize}px` : undefined,
+            }
+          ]
+          : null"
         class="vue-recycle-scroller__item-view"
         :class="[
           itemClass,
@@ -149,6 +155,11 @@ export default {
       default: false,
     },
 
+    disableTransform: {
+      type: Boolean,
+      default: false,
+    },
+
     updateInterval: {
       type: Number,
       default: 0,