fix: avoid jumping scroll position when upper item size is calculated (#374)

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

Author: ktsn

docs-src/src/components/TestChat.vue

@@ -10,6 +10,9 @@
       <button @click="addItems(10)">
         Add 10 items
       </button>
+      <button @click="addItems(50)">
+        Add 50 items
+      </button>
     </div>
 
     <DynamicScroller
@@ -25,12 +28,7 @@
         :active="active"
         :data-index="index"
       >
-        <div
-          class="message"
-          :style="{
-            height: `${item.size}px`,
-          }"
-        >
+        <div class="message">
           {{ item.text }}
         </div>
       </DynamicScrollerItem>
@@ -54,9 +52,8 @@ export default {
     addItems (count = 1) {
       for (let i = 0; i < count; i++) {
         this.items.push({
-          text: faker.lorem.sentence(),
+          text: faker.lorem.lines(),
           id: this.items.length + 1,
-          size: Math.random() * 120 + 40,
         })
       }
       this.scrollToBottom()

src/components/DynamicScroller.vue

@@ -140,9 +140,33 @@ export default {
     direction (value) {
       this.forceUpdate(true)
     },
+
+    itemsWithSize (next, prev) {
+      const scrollTop = this.$el.scrollTop
+
+      // Calculate total diff between prev and next sizes
+      // over current scroll top. Then add it to scrollTop to
+      // avoid jumping the contents that the user is seeing.
+      let prevActiveTop = 0; let activeTop = 0
+      const length = Math.min(next.length, prev.length)
+      for (let i = 0; i < length; i++) {
+        if (prevActiveTop >= scrollTop) {
+          break
+        }
+        prevActiveTop += prev[i].size || this.minItemSize
+        activeTop += next[i].size || this.minItemSize
+      }
+      const offset = activeTop - prevActiveTop
+
+      if (offset === 0) {
+        return
+      }
+
+      this.$el.scrollTop += offset
+    },
   },
 
-  created () {
+  beforeCreate () {
     this.$_updates = []
     this.$_undefinedSizes = 0
     this.$_undefinedMap = {}