Support page mode

Author: tangbc

README.md

@@ -38,7 +38,7 @@
 
 * Big data list with high render performance and efficient.
 
-* You don't have to care about each item size, it will calculate automatic.
+* You don't have to care about item size, it will calculate automatic.
 
 
 ## Live demo
@@ -209,6 +209,30 @@ More usages or getting start you can refer to these clearly [examples](https://g
       <td></td>
       <td>Emited when item resized (mounted), param <code>(id, size)</code>.</td>
     </tr>
+    <tr>
+      <td><code>direction</code></td>
+      <td>String</td>
+      <td>vertical</td>
+      <td>Scroll direction, available values are <code>vertical</code> and <code>horizontal</code></td>
+    </tr>
+    <tr>
+      <td><code>page-mode</code></td>
+      <td>Boolean</td>
+      <td>false</td>
+      <td>Let virtual list using global document to scroll through the list.</td>
+    </tr>
+    <tr>
+      <td><code>top-threshold</code></td>
+      <td>Number</td>
+      <td>0</td>
+      <td>The threshold to emit <code>totop</code> event, attention to multiple calls.</td>
+    </tr>
+    <tr>
+      <td><code>bottom-threshold</code></td>
+      <td>Number</td>
+      <td>0</td>
+      <td>The threshold to emit <code>tobottom</code> event, attention to multiple calls.</td>
+    </tr>
     <tr>
       <td><code>root-tag</code></td>
       <td>String</td>
@@ -293,24 +317,6 @@ More usages or getting start you can refer to these clearly [examples](https://g
       <td>{}</td>
       <td>For using using footer slot, footer slot wrapper element inline style.</td>
     </tr>
-    <tr>
-      <td><code>direction</code></td>
-      <td>String</td>
-      <td>vertical</td>
-      <td>Scroll direction, available values are <code>vertical</code> and <code>horizontal</code></td>
-    </tr>
-    <tr>
-      <td><code>top-threshold</code></td>
-      <td>Number</td>
-      <td>0</td>
-      <td>The threshold to emit <code>totop</code> event, attention to multiple calls.</td>
-    </tr>
-    <tr>
-      <td><code>bottom-threshold</code></td>
-      <td>Number</td>
-      <td>0</td>
-      <td>The threshold to emit <code>tobottom</code> event, attention to multiple calls.</td>
-    </tr>
   </table>
 </details>
 

src/index.js

@@ -67,6 +67,19 @@ const VirtualList = Vue.component('virtual-list', {
     } else if (this.offset) {
       this.scrollToOffset(this.offset)
     }
+
+    // in page mode we bind scroll event to document
+    if (this.pageMode) {
+      document.addEventListener('scroll', this.onScroll, {
+        passive: false
+      })
+
+      // taking root offsetTop or offsetLeft as slot header size
+      const { root } = this.$refs
+      if (root) {
+        this.virtual.updateParam('slotHeaderSize', root[this.isHorizontal ? 'offsetLeft' : 'offsetTop'])
+      }
+    }
   },
 
   beforeDestroy () {
@@ -86,27 +99,45 @@ const VirtualList = Vue.component('virtual-list', {
 
     // return current scroll offset
     getOffset () {
-      const { root } = this.$refs
-      return root ? Math.ceil(root[this.directionKey]) : 0
+      if (this.pageMode) {
+        return document.documentElement[this.directionKey]
+      } else {
+        const { root } = this.$refs
+        return root ? Math.ceil(root[this.directionKey]) : 0
+      }
     },
 
     // return client viewport size
     getClientSize () {
-      const { root } = this.$refs
-      return root ? root[this.isHorizontal ? 'clientWidth' : 'clientHeight'] : 0
+      const key = this.isHorizontal ? 'clientWidth' : 'clientHeight'
+      if (this.pageMode) {
+        return document.documentElement[key]
+      } else {
+        const { root } = this.$refs
+        return root ? root[key] : 0
+      }
     },
 
     // return all scroll size
     getScrollSize () {
-      const { root } = this.$refs
-      return root ? root[this.isHorizontal ? 'scrollWidth' : 'scrollHeight'] : 0
+      const key = this.isHorizontal ? 'scrollWidth' : 'scrollHeight'
+      if (this.pageMode) {
+        return document.documentElement[key]
+      } else {
+        const { root } = this.$refs
+        return root ? root[key] : 0
+      }
     },
 
     // set current scroll position to a expectant offset
     scrollToOffset (offset) {
-      const { root } = this.$refs
-      if (root) {
-        root[this.directionKey] = offset || 0
+      if (this.pageMode) {
+        document.documentElement[this.directionKey] = offset
+      } else {
+        const { root } = this.$refs
+        if (root) {
+          root[this.directionKey] = offset
+        }
       }
     },
 
@@ -256,14 +287,14 @@ const VirtualList = Vue.component('virtual-list', {
   render (h) {
     const { header, footer } = this.$slots
     const { padFront, padBehind } = this.range
-    const { isHorizontal, rootTag, wrapTag, wrapClass, wrapStyle, headerTag, headerClass, headerStyle, footerTag, footerClass, footerStyle } = this
+    const { isHorizontal, pageMode, rootTag, wrapTag, wrapClass, wrapStyle, headerTag, headerClass, headerStyle, footerTag, footerClass, footerStyle } = this
     const paddingStyle = { padding: isHorizontal ? `0px ${padBehind}px 0px ${padFront}px` : `${padFront}px 0px ${padBehind}px` }
     const wrapperStyle = wrapStyle ? Object.assign({}, wrapStyle, paddingStyle) : paddingStyle
 
     return h(rootTag, {
       ref: 'root',
       on: {
-        '&scroll': this.onScroll
+        '&scroll': !pageMode && this.onScroll
       }
     }, [
       // header slot

src/props.js

@@ -48,6 +48,10 @@ export const VirtualProps = {
     type: Number,
     default: 0
   },
+  pageMode: {
+    type: Boolean,
+    default: false
+  },
   rootTag: {
     type: String,
     default: 'div'

src/virtual.js

@@ -70,7 +70,7 @@ export default class Virtual {
 
   // return start index offset
   getOffset (start) {
-    return start < 1 ? 0 : this.getIndexOffset(start)
+    return start < 1 ? 0 : this.getIndexOffset(start) + this.param.slotHeaderSize
   }
 
   updateParam (key, value) {