Implement #13

Author: Akryum

dist/vue-virtual-scroller.js

@@ -1,7 +1,7 @@
 {
   "name": "vue-virtual-scroller",
   "description": "Smooth scrolling for any amount of data",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "author": {
     "name": "Guillaume Chau",
     "email": "[email protected]"

docs/build.js

@@ -75,6 +75,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    buffer: {
+      type: [Number, String],
+      default: 20,
+    },
+    poolSize: {
+      type: [Number, String],
+      default: 5,
+    },
   },
 
   data: () => ({
@@ -140,27 +148,27 @@ export default {
       const l = this.items.length
       const scroll = this.getScroll()
       if (scroll) {
-        let startIndex = Math.floor(scroll.top / this.itemHeight)
-        let endIndex = Math.ceil(scroll.bottom / this.itemHeight)
-        startIndex -= 1
+        let startIndex = Math.floor((Math.floor(scroll.top / this.itemHeight) - this.buffer) / this.poolSize) * this.poolSize
+        let endIndex = Math.floor((Math.ceil(scroll.bottom / this.itemHeight) + this.buffer) / this.poolSize) * this.poolSize
         if (startIndex < 0) {
           startIndex = 0
         }
-        endIndex += 2
         if (endIndex > l) {
           endIndex = l
         }
-        this.keysEnabled = !(startIndex > this._endIndex || endIndex < this._startIndex)
-        this._startIndex = startIndex
-        this._endIndex = endIndex
-        this.visibleItems = this.items.slice(startIndex, endIndex)
-        this.itemContainerStyle = {
-          height: l * this.itemHeight + 'px',
-        }
-        this.itemsStyle = {
-          marginTop: startIndex * this.itemHeight + 'px',
+        if (startIndex !== this._startIndex || endIndex !== this.endIndex) {
+          this.keysEnabled = !(startIndex > this._endIndex || endIndex < this._startIndex)
+          this._startIndex = startIndex
+          this._endIndex = endIndex
+          this.visibleItems = this.items.slice(startIndex, endIndex)
+          this.itemContainerStyle = {
+            height: l * this.itemHeight + 'px',
+          }
+          this.itemsStyle = {
+            marginTop: startIndex * this.itemHeight + 'px',
+          }
+          this.$forceUpdate()
         }
-        this.$forceUpdate()
       }
     },