Page mode, Perf improvement

Author: Akryum

README.md

@@ -153,6 +153,22 @@ Here is an example:
 </virtual-scroller>
 ```
 
+## Page mode
+
+The page mode expand the virtual-scroller and use the page viewport to compute which items are visible. That way, you can use it in a big page with HTML elements before or after (like a header and a footer). Just set the `page-mode` props to `true`:
+
+```html
+<header>
+  <menu></menu>
+</header>
+
+<virtual-scroller page-mode></virtual-scroller>
+
+<footer>
+  Copyright 2017 - Cat
+</footer>
+```
+
 ## Customizing the tags
 
 These are optional props you can use to change the DOM tags used in the virtual scroller:

dist/vue-virtual-scroller.css

@@ -1,5 +1,5 @@
 
-.virtual-scroller[data-v-5594e8c4] {
+.virtual-scroller[data-v-5594e8c4]:not(.page-mode) {
   overflow-y: auto;
 }
 .item-container[data-v-5594e8c4] {

dist/vue-virtual-scroller.js

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

package.json

@@ -1,9 +1,9 @@
 <template>
-  <component :is="mainTag" class="virtual-scroller" @scroll="updateVisibleItems" v-observe-visibility="handleVisibilityChange">
+  <component :is="mainTag" class="virtual-scroller" :class="cssClass" @scroll="updateVisibleItems" v-observe-visibility="handleVisibilityChange">
     <component :is="containerTag" class="item-container" :style="itemContainerStyle">
       <component :is="contentTag" class="items" :style="itemsStyle">
         <template v-if="renderers">
-          <component class="item" v-for="item in visibleItems" :key="item[keyField]" :is="renderers[item[typeField]]" :item="item"></component>
+          <component class="item" v-for="item in visibleItems" :key="keysEnabled && item[keyField]" :is="renderers[item[typeField]]" :item="item"></component>
         </template>
         <template v-else>
           <slot class="item" v-for="item in visibleItems" :item="item"></slot>
@@ -61,46 +61,97 @@ export default {
       type: String,
       default: 'div',
     },
+    pageMode: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data: () => ({
     visibleItems: [],
     itemContainerStyle: null,
     itemsStyle: null,
+    keysEnabled: true,
   }),
 
+  computed: {
+    cssClass () {
+      return {
+        'page-mode': this.pageMode,
+      }
+    },
+  },
+
   watch: {
     items () {
       this.updateVisibleItems()
     },
+    pageMode () {
+      this.applyPageMode()
+      this.updateVisibleItems()
+    },
   },
 
   methods: {
-    updateVisibleItems () {
-      const l = this.items.length
+    getScroll () {
       const el = this.$el
-      const scroll = {
-        top: el.scrollTop,
-        bottom: el.scrollTop + el.clientHeight,
-      }
-      this._startIndex = Math.floor(scroll.top / this.itemHeight)
-      this._endIndex = Math.ceil(scroll.bottom / this.itemHeight)
-      let startIndex = this._startIndex - 1
-      if (startIndex < 0) {
-        startIndex = 0
-      }
-      let endIndex = this._endIndex + 2
-      if (endIndex > l) {
-        endIndex = l
+      let scroll
+
+      if (this.pageMode) {
+        const rect = el.getBoundingClientRect()
+        let top = -rect.top
+        let height = window.innerHeight
+        if (top < 0) {
+          height += top
+          top = 0
+        }
+        if (top + height > rect.height) {
+          height = rect.height - top
+        }
+        scroll = {
+          top: top,
+          bottom: top + height,
+        }
+      } else {
+        scroll = {
+          top: el.scrollTop,
+          bottom: el.scrollTop + el.clientHeight,
+        }
       }
-      this.visibleItems = this.items.slice(startIndex, endIndex)
-      this.itemContainerStyle = {
-        height: l * this.itemHeight + 'px',
+
+      if (scroll.bottom >= 0 && scroll.top <= scroll.bottom) {
+        return scroll
+      } else {
+        return null
       }
-      this.itemsStyle = {
-        marginTop: startIndex * this.itemHeight + 'px',
+    },
+
+    updateVisibleItems () {
+      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
+        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',
+        }
+        this.$forceUpdate()
       }
-      this.$forceUpdate()
     },
 
     scrollToItem (index) {
@@ -114,16 +165,37 @@ export default {
         })
       }
     },
+
+    applyPageMode () {
+      if (this.pageMode) {
+        this.addWindowScroll()
+      } else {
+        this.removeWindowScroll()
+      }
+    },
+
+    addWindowScroll () {
+      window.addEventListener('scroll', this.updateVisibleItems, true)
+    },
+
+    removeWindowScroll () {
+      window.removeEventListener('scroll', this.updateVisibleItems, true)
+    },
   },
 
   mounted () {
     this.updateVisibleItems()
+    this.applyPageMode()
+  },
+
+  beforeDestroy () {
+    this.removeWindowScroll()
   },
 }
 </script>
 
 <style scoped>
-.virtual-scroller {
+.virtual-scroller:not(.page-mode) {
   overflow-y: auto;
 }