Fixed page mode bugs #204 #205

Author: tangbc

src/index.js

@@ -70,20 +70,19 @@ const VirtualList = Vue.component('virtual-list', {
 
     // in page mode we bind scroll event to document
     if (this.pageMode) {
+      this.updatePageModeFront()
+
       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 () {
     this.virtual.destroy()
+    if (this.pageMode) {
+      document.removeEventListener('scroll', this.onScroll)
+    }
   },
 
   methods: {
@@ -170,6 +169,18 @@ const VirtualList = Vue.component('virtual-list', {
       }
     },
 
+    // when using page mode we need update slot header size manually
+    // taking root offset relative to the browser as slot header size
+    updatePageModeFront () {
+      const { root } = this.$refs
+      if (root) {
+        const rect = root.getBoundingClientRect()
+        const { defaultView } = root.ownerDocument
+        const offsetFront = this.isHorizontal ? (rect.left + defaultView.pageXOffset) : (rect.top + defaultView.pageYOffset)
+        this.virtual.updateParam('slotHeaderSize', offsetFront)
+      }
+    },
+
     // reset all state back to initial
     reset () {
       this.virtual.destroy()