* Fix jumping scrolling after horizontal resize

* More stable scrolling when items height is too inconsistent

Author: IvanSafonov

.github/workflows/nodejs.yml

@@ -1,7 +1,7 @@
 # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
 # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
-name: Node.js CI
+name: tests
 
 on:
   push:
@@ -25,5 +25,6 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm ci
+    - run: npm run lint
     - run: npm run build
     - run: npm run test

README.md

@@ -83,6 +83,13 @@ npm run serve
 
 * `bottom`: emits when the last item is rendered. Used for infinite scroll
 
+   **Note:** You need to disable [scroll anchoring](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring) on the outer container. Without it after adding new items browser will scroll back to the bottom and bottom event will fire again.
+   ```css
+   .container {
+     overflow-anchor: none;
+   }
+   ```
+
 
 # Similar projects
 

dev/serve.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="container">
     <div class="box"></div>
     <list-scroller
       :itemComponent="item"
@@ -64,7 +64,12 @@ export default {
   border: solid;
   border-width: 1px;
 }
+
 .list {
   margin-bottom: 1.1em;
 }
+
+.container {
+  overflow-anchor: none;
+}
 </style>

jest.config.js

@@ -2,6 +2,6 @@ module.exports = {
   preset: '@vue/cli-plugin-unit-jest',
   testMatch: ['<rootDir>/tests/*.test.js'],
   collectCoverage: true,
-  collectCoverageFrom: ["src/**/*.{js,vue}"],
-  coverageReporters: ["text-summary"]
+  collectCoverageFrom: ['src/**/*.{js,vue}'],
+  coverageReporters: ['text'],
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-list-scroller",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Simple Vue.js component for efficiant rendering large lists",
   "homepage": "https://github.com/IvanSafonov/vue-list-scroller",
   "license": "MIT",

src/listscroller.vue

@@ -114,9 +114,15 @@ export default {
     /**
      * Resize event handler
      * Clears known items' heights if window width changes
+     * Keeps visible heights
      */
     resizeHandler() {
-      if (!pxEq(this.innerWidth, window.innerWidth)) this.heights.clear()
+      if (!pxEq(this.prevWidth, this.width())) {
+        const old = this.heights
+        this.heights = new Map()
+        for (let i = this.start; i < this.end; i++)
+          if (old.has(i)) this.heights.set(i, old.get(i))
+      }
     },
 
     /**
@@ -179,11 +185,10 @@ export default {
         this.setStart(this.start)
       }
 
-      this.fixHeight()
-
-      const bottom = this.itemsData.length === this.end
-      if (bottom && !this.bottom) this.$emit('bottom')
-      this.bottom = this.itemsData.length === this.end
+      this.$nextTick(() => {
+        this.fixSpacerMargin()
+        this.fixHeight()
+      })
     },
 
     observe(from, to) {
@@ -203,14 +208,15 @@ export default {
      * Calculates end index and updates observed items in ResizeObserver
      */
     setStart(index) {
-      this.innerWidth = window.innerWidth
+      this.prevWidth = this.width()
       const count = Math.round(
         this.renderViewports * Math.ceil(window.innerHeight / this.average),
       )
       const prevStart = this.start
       const prevEnd = this.end
       this.start = Math.max(index, 0)
       this.end = Math.min(this.start + count, this.itemsData.length)
+      if (prevStart === this.start && prevEnd === this.end) return
 
       if (this.start != prevStart || this.end != prevEnd)
         this.unobserve(0, Math.min(this.start, prevEnd) - prevStart)
@@ -220,80 +226,62 @@ export default {
           prevEnd - prevStart,
         )
 
-      this.fixSpacerMargin()
-      this.updateHeight()
-
       if (this.start < prevStart)
         this.observe(0, Math.min(prevStart, this.end) - this.start)
       if (prevEnd < this.end)
         this.observe(
           Math.max(prevEnd, this.start) - this.start,
           this.end - this.start,
         )
-    },
 
-    getBottoms() {
-      const { list, spacer } = this.$refs
-      return spacer && list
-        ? [
-            spacer.getBoundingClientRect().bottom,
-            list.getBoundingClientRect().bottom,
-          ]
-        : [0, 0]
+      const bottom = this.itemsData.length === this.end
+      if (bottom && !this.bottom) this.$emit('bottom')
+      this.bottom = bottom
     },
 
     /**
      * Fixes spacerMargin errors
      */
     fixSpacerMargin() {
-      if (
-        (this.start === 0 && !pxEq(this.spacerMargin, 0)) ||
-        pxGt(0, this.spacerMargin)
-      ) {
+      if (this.start === 0) {
+        if (pxEq(this.spacerMargin, 0)) return
         window.scroll(0, window.scrollY - this.spacerMargin)
         this.spacerMargin = 0
-        return
-      }
-
-      const avMargin = this.spacerMargin - this.average * this.start
-      if (Math.abs(avMargin) > 0.05 * this.itemsData.length * this.average) {
+      } else if (pxGt(0, this.spacerMargin)) {
+        const avMargin = this.spacerMargin - this.average * this.start
         this.spacerMargin -= avMargin
         window.scroll(0, window.scrollY - avMargin)
       }
     },
 
     /**
-     * Updates list height according to average item height
-     * Updates only if the difference is more than 5%
+     * Fixes height error
      */
-    updateHeight() {
-      const avHeight = this.average * this.itemsData.length
-      const [btSpacer, btRoot] = this.getBottoms()
-
-      if (
-        this.itemsData.length === 0 ||
-        Math.abs(this.height - avHeight) >
-          0.05 * this.itemsData.length * this.average ||
-        (this.itemsData.length !== this.end && pxGt(btSpacer, btRoot))
+    fixHeight() {
+      const { list, spacer } = this.$refs
+      const diff =
+        spacer.getBoundingClientRect().bottom -
+        list.getBoundingClientRect().bottom
+
+      if (this.itemsData.length == this.end) {
+        if (pxEq(diff, 0)) return
+        this.height += diff
+      } else if (pxGt(diff, 0)) {
+        this.height = Math.max(
+          this.height + diff,
+          this.average * this.itemsData.length,
+        )
+      } else if (
+        Math.abs(this.height - this.average * this.itemsData.length) >
+        0.1 * this.itemsData.length * this.average
       ) {
-        this.height = avHeight
+        this.height = this.average * this.itemsData.length
       }
     },
 
-    /**
-     * Fixes height error when the bottom of the list is rendered
-     */
-    fixHeight(sync = false) {
-      if (!sync) return this.$nextTick(() => this.fixHeight(true))
-
-      const [btSpacer, btRoot] = this.getBottoms()
-      if (
-        (this.itemsData.length == this.end && pxGt(btRoot, btSpacer)) ||
-        pxGt(btSpacer, btRoot)
-      ) {
-        const fix = btSpacer - btRoot
-        this.height += fix
-      }
+    width() {
+      const { list } = this.$refs
+      return list ? list.getBoundingClientRect().width : 0
     },
   },
 

tests/__snapshots__/listscroller.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`ListScroller component with 1000 items corrects spacer margin on scrolling up 1`] = `
 <div
-  style="height: 18750px; position: relative; overflow: hidden;"
+  style="height: 20000px; position: relative; overflow: hidden;"
 >
   <div
     style="transform: translateY(1875px);"
@@ -76,7 +76,7 @@ exports[`ListScroller component with 1000 items handles horisontal resize 1`] =
   style="height: 30000px; position: relative; overflow: hidden;"
 >
   <div
-    style="transform: translateY(4500px);"
+    style="transform: translateY(2880px);"
   >
     <div
       data-item-index="150"
@@ -129,10 +129,10 @@ exports[`ListScroller component with 1000 items handles horisontal resize 1`] =
 
 exports[`ListScroller component with 1000 items handles vertical resize 1`] = `
 <div
-  style="height: 20000px; position: relative; overflow: hidden;"
+  style="height: 30000px; position: relative; overflow: hidden;"
 >
   <div
-    style="transform: translateY(3000px);"
+    style="transform: translateY(2880px);"
   >
     <div
       data-item-index="150"
@@ -179,21 +179,6 @@ exports[`ListScroller component with 1000 items handles vertical resize 1`] = `
     >
       158 158
     </div>
-    <div
-      data-item-index="159"
-    >
-      159 159
-    </div>
-    <div
-      data-item-index="160"
-    >
-      160 160
-    </div>
-    <div
-      data-item-index="161"
-    >
-      161 161
-    </div>
   </div>
 </div>
 `;