Fix static height mode index error

Author: Akryum

dist/vue-virtual-scroller.js

@@ -4,6 +4,9 @@
       <span>
         <input v-model="countInput" type="number" min="0" max="500000" /> items
       </span>
+      <label>
+        <input v-model="enableLetters" type="checkbox" /> variable height
+      </label>
       <span>
         <input v-model="buffer" type="number" min="1" max="500000" /> buffer
       </span>
@@ -21,7 +24,7 @@
     <div class="content" v-if="showScroller">
       <div class="wrapper">
         <!-- Scoped slots -->
-        <virtual-scroller v-if="scopedSlots" class="scroller" :items="items" main-tag="section" content-tag="table" :buffer="buffer" :pool-size="poolSize">
+        <virtual-scroller v-if="scopedSlots" class="scroller" :item-height="itemHeight" :items="items" main-tag="section" content-tag="table" :buffer="buffer" :pool-size="poolSize">
           <template scope="props">
             <!-- <letter v-if="props.item.type === 'letter'" :item="props.item"></letter>-->
             <tr v-if="props.item.type === 'letter'" class="letter" :key="props.itemKey">
@@ -37,7 +40,7 @@
         </virtual-scroller>
 
         <!-- Renderers -->
-        <virtual-scroller v-else class="scroller" :items="items" :renderers="renderers" type-field="type" key-field="index" main-tag="section" content-tag="table"></virtual-scroller>
+        <virtual-scroller v-else class="scroller" :item-height="itemHeight" :items="items" :renderers="renderers" type-field="type" key-field="index" main-tag="section" content-tag="table"></virtual-scroller>
       </div>
     </div>
   </div>
@@ -70,12 +73,16 @@ export default {
     scopedSlots: false,
     buffer: 0,
     poolSize: 1,
+    enableLetters: true,
   }),
 
   watch: {
     count () {
       this.generateItems()
     },
+    enableLetters () {
+      this.generateItems()
+    },
   },
 
   computed: {
@@ -92,13 +99,17 @@ export default {
         this.count = val
       },
     },
+
+    itemHeight () {
+      return this.enableLetters ? null : 42
+    },
   },
 
   methods: {
     generateItems () {
       console.log('Generating ' + this.count + ' items...')
       let time = Date.now()
-      const items = Object.freeze(getData(this.count))
+      const items = Object.freeze(getData(this.count, this.enableLetters))
       this._time = Date.now()
       this.generateTime = this._time - time
       console.log('Generated ' + items.length + ' in ' + this.generateTime + 'ms')
@@ -151,7 +162,7 @@ body {
   margin-bottom: 12px;
 }
 
-.counter > span:not(:last-child) {
+.counter > *:not(:last-child) {
   margin-right: 24px;
 }
 

docs-src/src/App.vue

@@ -1,6 +1,6 @@
 import faker from 'faker'
 
-export function getData (count) {
+export function getData (count, letters) {
   const raw = {}
 
   const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('')
@@ -22,12 +22,14 @@ export function getData (count) {
 
   for (const l of alphabet) {
     raw[l] = raw[l].sort((a, b) => a.name < b.name ? -1 : 1)
-    data.push({
-      index: index++,
-      type: 'letter',
-      value: l,
-      height: 200,
-    })
+    if (letters) {
+      data.push({
+        index: index++,
+        type: 'letter',
+        value: l,
+        height: 200,
+      })
+    }
     for (var item of raw[l]) {
       data.push({
         index: index++,

docs-src/src/data.js

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

docs/build.js

@@ -163,13 +163,15 @@ export default {
     updateVisibleItems () {
       const l = this.items.length
       const scroll = this.getScroll()
+      const items = this.items
+      const itemHeight = this.itemHeight
       let containerHeight, offsetTop
       if (scroll) {
         let startIndex = -1
         let endIndex = -1
 
         // Variable height mode
-        if (this.itemHeight === null) {
+        if (itemHeight === null) {
           const heights = this.heights
           let h
           let a = 0
@@ -197,16 +199,16 @@ export default {
           // Searching for endIndex
           for (endIndex = i; endIndex < l && heights[endIndex] < scroll.bottom; endIndex++);
           if (endIndex === -1) {
-            endIndex = this.items.length - 1
+            endIndex = items.length - 1
           } else {
             endIndex++
           }
         } else {
           // Fixed height mode
-          startIndex = Math.floor((Math.floor(scroll.top / this.itemHeight) - this.buffer) / this.poolSize) * this.poolSize
-          endIndex = Math.floor((Math.ceil(scroll.bottom / this.itemHeight) + this.buffer) / this.poolSize) * this.poolSize
-          containerHeight = l * this.itemHeight
-          offsetTop = startIndex * this.itemHeight
+          const buffer = this.buffer
+          const poolSize = this.poolSize
+          startIndex = ~~((~~(scroll.top / itemHeight) - buffer) / poolSize) * poolSize
+          endIndex = ~~((Math.ceil(scroll.bottom / itemHeight) + buffer) / poolSize) * poolSize
         }
 
         if (startIndex < 0) {
@@ -216,11 +218,17 @@ export default {
           endIndex = l
         }
 
+        if (itemHeight !== null) {
+          // Fixed height mode
+          offsetTop = startIndex * itemHeight
+          containerHeight = l * itemHeight
+        }
+
         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.visibleItems = items.slice(startIndex, endIndex)
           this.itemContainerStyle = {
             height: containerHeight + 'px',
           }