diff --git a/docs/css/app.c29e6843.css b/docs/css/app.c29e6843.css
new file mode 100644
index 0000000..df11a59
--- /dev/null
+++ b/docs/css/app.c29e6843.css
@@ -0,0 +1 @@
+body{font-size:18px}h1,h2,h3,h4,h5,h6{letter-spacing:0}@media (max-width:640px){#app{padding:3px;width:100%}}#nav{position:fixed;top:0;left:0;right:0;background-color:#9b4cca;color:#fff;height:40px;display:flex;align-items:center;padding-left:1em;white-space:nowrap;overflow-x:auto}@media (max-width:640px){#nav{padding:0;position:relative;background-color:unset;color:unset;height:unset;padding-left:unset;align-items:unset}}#nav a{display:inline-block;color:#fff}@media (max-width:640px){#nav a{margin-bottom:0;margin-right:1em;color:#9b4dca}}#nav .line{margin:0 1em;font-size:14px;color:#a9a9a9}@media (max-width:640px){#nav .line{display:none}}#nav .router-link-exact-active,#nav .router-link-exact-active:hover{color:inherit;cursor:default;text-decoration:underline}@media (max-width:640px){#nav .router-link-exact-active,#nav .router-link-exact-active:hover{border-bottom:1px solid;border-color:#606c76;text-decoration:none}}.example{margin:0 auto;padding:0 2em;width:776px;padding-top:3em}@media (max-width:640px){.example{margin:unset;padding:unset;width:unset;padding-top:unset}}.example-content{margin-top:1em;background-color:#fff;position:relative}.scroll-touch{-webkit-overflow-scrolling:touch}.scroll-touch::-webkit-scrollbar{width:10px}.scroll-touch::-webkit-scrollbar-track{background:#f4f4f4}.scroll-touch::-webkit-scrollbar-thumb{border-radius:0;background:rgba(0,0,0,.12)}.scroll-touch::-webkit-scrollbar-thumb:hover{background:#b2b2b2}code{background-color:pink!important}.name[data-v-1c868cc0]{margin-top:1em}.desc[data-v-1c868cc0]{padding-bottom:3em}.icons[data-v-1c868cc0]{padding-bottom:1em}.icons .btn[data-v-1c868cc0]{margin-right:1em}.head[data-v-1c868cc0]{margin-bottom:3em}.head img[data-v-1c868cc0]{margin-right:.5em;width:auto;height:24px}.title[data-v-1c868cc0]{margin:1em 0}ul[data-v-1c868cc0]{padding-left:.5em}li[data-v-1c868cc0]{list-style-position:outside;margin-left:1em}.introduction[data-v-0c507b69]{font-size:16px;padding:.5em 1em;border-radius:3px;background-color:#f8f8ff}@media (max-width:640px){.introduction[data-v-0c507b69]{display:none}}pre[data-v-99fd125a]{border:none;padding:1em;font-size:14px;border-radius:3px;font-family:Consolas,Monaco,Andale Mono,Lucida Console,monospace}.github-corner[data-v-4799d028]{padding-left:30px;width:100px;height:40px;line-height:40px;position:fixed;right:0;top:0;color:#fff;font-size:14px;font-weight:700;background-size:30px 30px;background-repeat:no-repeat;background-position:0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M841.6 268.8c32-57.6-3.2-134.4-3.2-134.4-80 0-137.6 54.4-137.6 54.4-32-19.2-134.4-19.2-134.4-19.2s-102.4 0-134.4 19.2c0 0-57.6-54.4-137.6-54.4 0 0-35.2 76.8-3.2 134.4 0 0-70.4 67.2-44.8 211.2 25.6 134.4 144 169.6 220.8 169.6 0 0-32 25.6-25.6 70.4 0 0-44.8 25.6-89.6 9.6-44.8-19.2-67.2-64-67.2-64S240 608 195.2 630.4c0 0-12.8 12.8 35.2 35.2 0 0 35.2 54.4 48 86.4 12.8 32 86.4 57.6 156.8 41.6V896s0 9.6-19.2 12.8c-19.2 3.2-19.2 12.8-9.6 12.8h323.2c9.6 0 9.6-9.6-9.6-12.8-19.2-3.2-19.2-12.8-19.2-12.8V723.2c0-44.8-32-70.4-32-70.4 76.8 0 195.2-35.2 220.8-169.6 22.4-147.2-48-214.4-48-214.4z' fill='%23fff'/%3E%3C/svg%3E")}.tab[data-v-13711752]{width:100%;display:flex;margin-bottom:1em;position:relative}@media (max-width:640px){.tab[data-v-13711752]{display:none}}.tab .tab-item[data-v-13711752]{font-size:14px;font-weight:400;width:85px;margin-right:.5em;height:35px;display:flex;align-items:center;justify-content:center;position:relative;top:1px;cursor:pointer;opacity:.3;background-size:20px 20px;background-repeat:no-repeat;background-position:0}.tab .tab-item.active[data-v-13711752]{opacity:1}.tab .tab-item.view[data-v-13711752]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cdefs%3E%3Cstyle/%3E%3C/defs%3E%3Cpath d='M512 251.853c192.768 0 358.707 113.1 436.378 276.275H1024c-82.022-202.394-280.218-345.293-512-345.293S82.022 325.735 0 528.128h75.674C153.344 364.954 319.284 251.853 512 251.853zm0 552.55c-192.717 0-358.656-113.05-436.326-276.275H0c82.022 202.445 280.166 345.344 512 345.344s430.029-142.9 512-345.344h-75.674C870.707 691.354 704.768 804.403 512 804.403zM327.834 528.128a184.115 184.115 0 10368.281.051 184.115 184.115 0 00-368.281-.051zm299.315 0a115.2 115.2 0 11-230.298 0 115.2 115.2 0 01230.298 0zm0 0'/%3E%3C/svg%3E")}.tab .tab-item.code[data-v-13711752]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cdefs%3E%3Cstyle/%3E%3C/defs%3E%3Cpath d='M549.973 128a42.453 42.453 0 00-42.154 37.76l-75.904 683.136a42.325 42.325 0 1084.266 9.387l75.904-683.179A42.325 42.325 0 00550.016 128zM243.541 286.165a42.539 42.539 0 00-30.208 12.502L30.165 481.835a42.624 42.624 0 000 60.33l183.168 183.168a42.667 42.667 0 0060.331-60.33L120.661 512l153.003-153.003a42.624 42.624 0 00-30.165-72.832zm537.003 0a42.667 42.667 0 00-30.165 72.832L903.339 512 750.336 665.003a42.667 42.667 0 0060.33 60.33l183.169-183.168a42.624 42.624 0 000-60.33L810.667 298.667a42.539 42.539 0 00-30.166-12.502z'/%3E%3C/svg%3E")}.tab .complete-code-url[data-v-13711752]{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:12px}
\ No newline at end of file
diff --git a/docs/css/app.fd752fac.css b/docs/css/app.fd752fac.css
deleted file mode 100644
index 5cb4147..0000000
--- a/docs/css/app.fd752fac.css
+++ /dev/null
@@ -1 +0,0 @@
-body{font-size:18px}h1,h2,h3,h4,h5,h6{letter-spacing:0}@media (max-width:640px){#app{padding:3px;width:100%}}#nav{position:fixed;top:0;left:0;right:0;background-color:#9b4cca;color:#fff;height:40px;display:flex;align-items:center;padding-left:1em;white-space:nowrap;overflow-x:auto}@media (max-width:640px){#nav{padding:0;position:relative;background-color:unset;color:unset;height:unset;padding-left:unset;align-items:unset}}#nav a{display:inline-block;color:#fff}@media (max-width:640px){#nav a{margin-bottom:0;margin-right:1em;color:#9b4dca}}#nav .line{margin:0 1em;font-size:14px;color:#a9a9a9}@media (max-width:640px){#nav .line{display:none}}#nav .router-link-exact-active,#nav .router-link-exact-active:hover{color:inherit;cursor:default;text-decoration:underline}@media (max-width:640px){#nav .router-link-exact-active,#nav .router-link-exact-active:hover{border-bottom:1px solid;border-color:#606c76;text-decoration:none}}.example{margin:0 auto;padding:0 2em;width:776px;padding-top:3em}@media (max-width:640px){.example{margin:unset;padding:unset;width:unset;padding-top:unset}}.example-content{margin-top:1em;background-color:#fff}.scroll-touch{-webkit-overflow-scrolling:touch}.scroll-touch::-webkit-scrollbar{width:10px}.scroll-touch::-webkit-scrollbar-track{background:#f4f4f4}.scroll-touch::-webkit-scrollbar-thumb{border-radius:0;background:rgba(0,0,0,.12)}.scroll-touch::-webkit-scrollbar-thumb:hover{background:#b2b2b2}code{background-color:pink!important}.name[data-v-1c868cc0]{margin-top:1em}.desc[data-v-1c868cc0]{padding-bottom:3em}.icons[data-v-1c868cc0]{padding-bottom:1em}.icons .btn[data-v-1c868cc0]{margin-right:1em}.head[data-v-1c868cc0]{margin-bottom:3em}.head img[data-v-1c868cc0]{margin-right:.5em;width:auto;height:24px}.title[data-v-1c868cc0]{margin:1em 0}ul[data-v-1c868cc0]{padding-left:.5em}li[data-v-1c868cc0]{list-style-position:outside;margin-left:1em}.introduction[data-v-0c507b69]{font-size:16px;padding:.5em 1em;border-radius:3px;background-color:#f8f8ff}@media (max-width:640px){.introduction[data-v-0c507b69]{display:none}}pre[data-v-99fd125a]{border:none;padding:1em;font-size:14px;border-radius:3px;font-family:Consolas,Monaco,Andale Mono,Lucida Console,monospace}.github-corner[data-v-4799d028]{padding-left:30px;width:100px;height:40px;line-height:40px;position:fixed;right:0;top:0;color:#fff;font-size:14px;font-weight:700;background-size:30px 30px;background-repeat:no-repeat;background-position:0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M841.6 268.8c32-57.6-3.2-134.4-3.2-134.4-80 0-137.6 54.4-137.6 54.4-32-19.2-134.4-19.2-134.4-19.2s-102.4 0-134.4 19.2c0 0-57.6-54.4-137.6-54.4 0 0-35.2 76.8-3.2 134.4 0 0-70.4 67.2-44.8 211.2 25.6 134.4 144 169.6 220.8 169.6 0 0-32 25.6-25.6 70.4 0 0-44.8 25.6-89.6 9.6-44.8-19.2-67.2-64-67.2-64S240 608 195.2 630.4c0 0-12.8 12.8 35.2 35.2 0 0 35.2 54.4 48 86.4 12.8 32 86.4 57.6 156.8 41.6V896s0 9.6-19.2 12.8c-19.2 3.2-19.2 12.8-9.6 12.8h323.2c9.6 0 9.6-9.6-9.6-12.8-19.2-3.2-19.2-12.8-19.2-12.8V723.2c0-44.8-32-70.4-32-70.4 76.8 0 195.2-35.2 220.8-169.6 22.4-147.2-48-214.4-48-214.4z' fill='%23fff'/%3E%3C/svg%3E")}.tab[data-v-13711752]{width:100%;display:flex;margin-bottom:1em;position:relative}@media (max-width:640px){.tab[data-v-13711752]{display:none}}.tab .tab-item[data-v-13711752]{font-size:14px;font-weight:400;width:85px;margin-right:.5em;height:35px;display:flex;align-items:center;justify-content:center;position:relative;top:1px;cursor:pointer;opacity:.3;background-size:20px 20px;background-repeat:no-repeat;background-position:0}.tab .tab-item.active[data-v-13711752]{opacity:1}.tab .tab-item.view[data-v-13711752]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cdefs%3E%3Cstyle/%3E%3C/defs%3E%3Cpath d='M512 251.853c192.768 0 358.707 113.1 436.378 276.275H1024c-82.022-202.394-280.218-345.293-512-345.293S82.022 325.735 0 528.128h75.674C153.344 364.954 319.284 251.853 512 251.853zm0 552.55c-192.717 0-358.656-113.05-436.326-276.275H0c82.022 202.445 280.166 345.344 512 345.344s430.029-142.9 512-345.344h-75.674C870.707 691.354 704.768 804.403 512 804.403zM327.834 528.128a184.115 184.115 0 10368.281.051 184.115 184.115 0 00-368.281-.051zm299.315 0a115.2 115.2 0 11-230.298 0 115.2 115.2 0 01230.298 0zm0 0'/%3E%3C/svg%3E")}.tab .tab-item.code[data-v-13711752]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cdefs%3E%3Cstyle/%3E%3C/defs%3E%3Cpath d='M549.973 128a42.453 42.453 0 00-42.154 37.76l-75.904 683.136a42.325 42.325 0 1084.266 9.387l75.904-683.179A42.325 42.325 0 00550.016 128zM243.541 286.165a42.539 42.539 0 00-30.208 12.502L30.165 481.835a42.624 42.624 0 000 60.33l183.168 183.168a42.667 42.667 0 0060.331-60.33L120.661 512l153.003-153.003a42.624 42.624 0 00-30.165-72.832zm537.003 0a42.667 42.667 0 00-30.165 72.832L903.339 512 750.336 665.003a42.667 42.667 0 0060.33 60.33l183.169-183.168a42.624 42.624 0 000-60.33L810.667 298.667a42.539 42.539 0 00-30.166-12.502z'/%3E%3C/svg%3E")}.tab .complete-code-url[data-v-13711752]{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:12px}
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index e7411a5..e0b0c29 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><title>vue-virtual-scroll-list</title><link rel=icon href=favicon.png><link rel=stylesheet href=milligram.css><link rel=stylesheet href=highlight/theme.css><script src=highlight/pack.js></script><script async defer src=https://buttons.github.io/buttons.js></script><script>hljs.initHighlightingOnLoad()</script><link href=css/chat-room.9f37805a.css rel=prefetch><link href=css/dynamic-size.9013d8ce.css rel=prefetch><link href=css/fixed-size.840ec49f.css rel=prefetch><link href=css/horizontal.50e26ffa.css rel=prefetch><link href=css/infinite-loading.4b238c18.css rel=prefetch><link href=css/keep-state.2736386a.css rel=prefetch><link href=css/page-mode.bb1117ff.css rel=prefetch><link href=js/chat-room.37e520ca.js rel=prefetch><link href=js/chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode.fea2e070.js rel=prefetch><link href=js/dynamic-size.debe7fb6.js rel=prefetch><link href=js/fixed-size.fab2dd0f.js rel=prefetch><link href=js/horizontal.6faaaf18.js rel=prefetch><link href=js/infinite-loading.afbe430b.js rel=prefetch><link href=js/keep-state.d5fcfbd1.js rel=prefetch><link href=js/page-mode.ff8e6c9b.js rel=prefetch><link href=css/app.fd752fac.css rel=preload as=style><link href=js/app.13fd1368.js rel=preload as=script><link href=js/chunk-vendors.cb54c5d1.js rel=preload as=script><link href=css/app.fd752fac.css rel=stylesheet></head><body><div id=app></div><script src=js/chunk-vendors.cb54c5d1.js></script><script src=js/app.13fd1368.js></script></body></html>
\ No newline at end of file
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><title>vue-virtual-scroll-list</title><link rel=icon href=favicon.png><link rel=stylesheet href=milligram.css><link rel=stylesheet href=highlight/theme.css><script src=highlight/pack.js></script><script async defer src=https://buttons.github.io/buttons.js></script><script>hljs.initHighlightingOnLoad()</script><link href=css/chat-room.9f37805a.css rel=prefetch><link href=css/dynamic-size.9013d8ce.css rel=prefetch><link href=css/fixed-size.840ec49f.css rel=prefetch><link href=css/horizontal.50e26ffa.css rel=prefetch><link href=css/infinite-loading.4b238c18.css rel=prefetch><link href=css/keep-state.2736386a.css rel=prefetch><link href=css/page-mode.bb1117ff.css rel=prefetch><link href=js/chat-room.37e520ca.js rel=prefetch><link href=js/chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode.fea2e070.js rel=prefetch><link href=js/dynamic-size.debe7fb6.js rel=prefetch><link href=js/fixed-size.fab2dd0f.js rel=prefetch><link href=js/horizontal.6faaaf18.js rel=prefetch><link href=js/infinite-loading.afbe430b.js rel=prefetch><link href=js/keep-state.d5fcfbd1.js rel=prefetch><link href=js/page-mode.ff8e6c9b.js rel=prefetch><link href=css/app.c29e6843.css rel=preload as=style><link href=js/app.140ab398.js rel=preload as=script><link href=js/chunk-vendors.cb54c5d1.js rel=preload as=script><link href=css/app.c29e6843.css rel=stylesheet></head><body><div id=app></div><script src=js/chunk-vendors.cb54c5d1.js></script><script src=js/app.140ab398.js></script></body></html>
\ No newline at end of file
diff --git a/docs/index.js b/docs/index.js
index c6365ef..607e25e 100644
--- a/docs/index.js
+++ b/docs/index.js
@@ -1,5 +1,5 @@
 /*!
- * vue-virtual-scroll-list v2.1.9
+ * vue-virtual-scroll-list v2.2.0
  * open source under the MIT license
  * https://github.com/tangbc/vue-virtual-scroll-list#readme
  */
@@ -647,19 +647,18 @@
 
 
       if (this.pageMode) {
+        this.updatePageModeFront();
         document.addEventListener('scroll', this.onScroll, {
           passive: false
-        }); // taking root offsetTop or offsetLeft as slot header size
-
-        var root = this.$refs.root;
-
-        if (root) {
-          this.virtual.updateParam('slotHeaderSize', root[this.isHorizontal ? 'offsetLeft' : 'offsetTop']);
-        }
+        });
       }
     },
     beforeDestroy: function beforeDestroy() {
       this.virtual.destroy();
+
+      if (this.pageMode) {
+        document.removeEventListener('scroll', this.onScroll);
+      }
     },
     methods: {
       // get item size by id
@@ -742,6 +741,18 @@
           }, 3);
         }
       },
+      // when using page mode we need update slot header size manually
+      // taking root offset relative to the browser as slot header size
+      updatePageModeFront: function updatePageModeFront() {
+        var root = this.$refs.root;
+
+        if (root) {
+          var rect = root.getBoundingClientRect();
+          var defaultView = root.ownerDocument.defaultView;
+          var offsetFront = this.isHorizontal ? rect.left + defaultView.pageXOffset : rect.top + defaultView.pageYOffset;
+          this.virtual.updateParam('slotHeaderSize', offsetFront);
+        }
+      },
       // reset all state back to initial
       reset: function reset() {
         this.virtual.destroy();
diff --git a/docs/js/app.13fd1368.js b/docs/js/app.140ab398.js
similarity index 63%
rename from docs/js/app.13fd1368.js
rename to docs/js/app.140ab398.js
index fdc8590..a10ec01 100644
--- a/docs/js/app.13fd1368.js
+++ b/docs/js/app.140ab398.js
@@ -1 +1 @@
-(function(e){function t(t){for(var n,a,o=t[0],l=t[1],c=t[2],h=0,u=[];h<o.length;h++)a=o[h],Object.prototype.hasOwnProperty.call(s,a)&&s[a]&&u.push(s[a][0]),s[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);d&&d(t);while(u.length)u.shift()();return r.push.apply(r,c||[]),i()}function i(){for(var e,t=0;t<r.length;t++){for(var i=r[t],n=!0,a=1;a<i.length;a++){var o=i[a];0!==s[o]&&(n=!1)}n&&(r.splice(t--,1),e=l(l.s=i[0]))}return e}var n={},a={app:0},s={app:0},r=[];function o(e){return l.p+"js/"+({"chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode":"chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode","chat-room":"chat-room","dynamic-size":"dynamic-size","fixed-size":"fixed-size",horizontal:"horizontal","infinite-loading":"infinite-loading","keep-state":"keep-state","page-mode":"page-mode"}[e]||e)+"."+{"chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode":"fea2e070","chat-room":"37e520ca","dynamic-size":"debe7fb6","fixed-size":"fab2dd0f",horizontal:"6faaaf18","infinite-loading":"afbe430b","keep-state":"d5fcfbd1","page-mode":"ff8e6c9b"}[e]+".js"}function l(t){if(n[t])return n[t].exports;var i=n[t]={i:t,l:!1,exports:{}};return e[t].call(i.exports,i,i.exports,l),i.l=!0,i.exports}l.e=function(e){var t=[],i={"chat-room":1,"dynamic-size":1,"fixed-size":1,horizontal:1,"infinite-loading":1,"keep-state":1,"page-mode":1};a[e]?t.push(a[e]):0!==a[e]&&i[e]&&t.push(a[e]=new Promise((function(t,i){for(var n="css/"+({"chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode":"chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode","chat-room":"chat-room","dynamic-size":"dynamic-size","fixed-size":"fixed-size",horizontal:"horizontal","infinite-loading":"infinite-loading","keep-state":"keep-state","page-mode":"page-mode"}[e]||e)+"."+{"chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode":"31d6cfe0","chat-room":"9f37805a","dynamic-size":"9013d8ce","fixed-size":"840ec49f",horizontal:"50e26ffa","infinite-loading":"4b238c18","keep-state":"2736386a","page-mode":"bb1117ff"}[e]+".css",s=l.p+n,r=document.getElementsByTagName("link"),o=0;o<r.length;o++){var c=r[o],h=c.getAttribute("data-href")||c.getAttribute("href");if("stylesheet"===c.rel&&(h===n||h===s))return t()}var u=document.getElementsByTagName("style");for(o=0;o<u.length;o++){c=u[o],h=c.getAttribute("data-href");if(h===n||h===s)return t()}var d=document.createElement("link");d.rel="stylesheet",d.type="text/css",d.onload=t,d.onerror=function(t){var n=t&&t.target&&t.target.src||s,r=new Error("Loading CSS chunk "+e+" failed.\n("+n+")");r.code="CSS_CHUNK_LOAD_FAILED",r.request=n,delete a[e],d.parentNode.removeChild(d),i(r)},d.href=s;var f=document.getElementsByTagName("head")[0];f.appendChild(d)})).then((function(){a[e]=0})));var n=s[e];if(0!==n)if(n)t.push(n[2]);else{var r=new Promise((function(t,i){n=s[e]=[t,i]}));t.push(n[2]=r);var c,h=document.createElement("script");h.charset="utf-8",h.timeout=120,l.nc&&h.setAttribute("nonce",l.nc),h.src=o(e);var u=new Error;c=function(t){h.onerror=h.onload=null,clearTimeout(d);var i=s[e];if(0!==i){if(i){var n=t&&("load"===t.type?"missing":t.type),a=t&&t.target&&t.target.src;u.message="Loading chunk "+e+" failed.\n("+n+": "+a+")",u.name="ChunkLoadError",u.type=n,u.request=a,i[1](u)}s[e]=void 0}};var d=setTimeout((function(){c({type:"timeout",target:h})}),12e4);h.onerror=h.onload=c,document.head.appendChild(h)}return Promise.all(t)},l.m=e,l.c=n,l.d=function(e,t,i){l.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},l.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(l.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)l.d(i,n,function(t){return e[t]}.bind(null,n));return i},l.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="",l.oe=function(e){throw console.error(e),e};var c=window["webpackJsonp"]=window["webpackJsonp"]||[],h=c.push.bind(c);c.push=t,c=c.slice();for(var u=0;u<c.length;u++)t(c[u]);var d=h;r.push([0,"chunk-vendors"]),i()})({0:function(e,t,i){e.exports=i("56d7")},"187e":function(e,t,i){"use strict";var n=i("1a2b"),a=i.n(n);a.a},"1a2b":function(e,t,i){},2345:function(e,t,i){"use strict";var n=i("67ef"),a=i.n(n);a.a},2395:function(e,t,i){},"2f31":function(e,t,i){},"3f05":function(e,t,i){"use strict";t["a"]=function(){var e=(location.hash||"").substr(2);return e?"https://github.com/tangbc/vue-virtual-scroll-list/tree/master/example/src/views/".concat(e,"/Main.vue"):"https://github.com/tangbc/vue-virtual-scroll-list"}},"56d7":function(e,t,i){"use strict";i.r(t);i("b0c0"),i("e260"),i("e6cf"),i("cca6"),i("a79d");var n=i("e832"),a=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{attrs:{id:"app"}},[i("div",{attrs:{id:"nav"}},[i("router-link",{attrs:{to:"/"}},[e._v("home")]),i("span",{staticClass:"line"},[e._v("|")]),i("router-link",{attrs:{to:"/fixed-size"}},[e._v("fixed size")]),i("span",{staticClass:"line"},[e._v("|")]),i("router-link",{attrs:{to:"/dynamic-size"}},[e._v("dynamic size")]),i("span",{staticClass:"line"},[e._v("|")]),i("router-link",{attrs:{to:"/horizontal"}},[e._v("horizontal")]),i("span",{staticClass:"line"},[e._v("|")]),i("router-link",{attrs:{to:"/infinite-loading"}},[e._v("infinite loading")]),i("span",{staticClass:"line"},[e._v("|")]),i("router-link",{attrs:{to:"/keep-state"}},[e._v("keep state")]),i("span",{staticClass:"line"},[e._v("|")]),i("router-link",{attrs:{to:"/page-mode"}},[e._v("page mode")]),i("span",{staticClass:"line"},[e._v("|")]),i("router-link",{attrs:{to:"/chat-room"}},[e._v("chat room")])],1),i("router-view")],1)},s=[],r=(i("7c55"),i("2877")),o={},l=Object(r["a"])(o,a,s,!1,null,null,null),c=l.exports,h=(i("d3b7"),i("8c4f")),u=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"example"},[i("github-corner"),i("h2",{staticClass:"name"},[e._v(" vue-virtual-scroll-list ")]),i("div",{staticClass:"desc"},[e._v("⚡️ A vue component support big amount data list with high scroll performance.")]),i("div",{staticClass:"icons"},[i("span",{staticClass:"btn"},[i("github-button",{attrs:{href:"https://github.com/tangbc/vue-virtual-scroll-list/issues","data-color-scheme":"no-preference: dark; light: dark; dark: dark;","data-size":"large","data-show-count":"true","aria-label":"Issue tangbc/vue-virtual-scroll-list on GitHub"}},[e._v("Issue")])],1),i("span",{staticClass:"btn"},[i("github-button",{attrs:{href:"https://github.com/tangbc/vue-virtual-scroll-list","data-color-scheme":"no-preference: dark; light: dark; dark: dark;","data-size":"large","data-show-count":"true","aria-label":"Star tangbc/vue-virtual-scroll-list on GitHub"}},[e._v("Star")])],1),i("span",{staticClass:"btn"},[i("github-button",{attrs:{href:"https://github.com/tangbc/vue-virtual-scroll-list/fork","data-color-scheme":"no-preference: dark; light: dark; dark: dark;","data-size":"large","data-show-count":"true","aria-label":"Fork tangbc/vue-virtual-scroll-list on GitHub"}},[e._v("Fork")])],1),i("span",{staticClass:"btn"},[i("github-button",{attrs:{href:"https://github.com/tangbc/vue-virtual-scroll-list/subscription","data-color-scheme":"no-preference: dark; light: dark; dark: dark;","data-size":"large","data-show-count":"true","aria-label":"Watch tangbc/vue-virtual-scroll-list on GitHub"}},[e._v("Watch")])],1)]),i("h3",{staticClass:"title"},[e._v("What's news in v2.0")]),e._m(0),i("h3",{staticClass:"title"},[e._v("Contributions")]),i("div",[e._v("Welcome to improve this component with any issue, pull request or code review. ✋")])],1)},d=[function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ul",[i("li",[e._v("Support header, footer slot, horizontal direction.")]),i("li",[e._v("Code structure is more reasonable and good maintainability.")]),i("li",[e._v("Abandoned v-for mode and variable mode, all condition unify into one mode.")]),i("li",[e._v("Don't have to care about each item size, in sometimes it's difficult to know that.")])])}],f={name:"index",data:function(){return{}}},p=f,m=(i("187e"),Object(r["a"])(p,u,d,!1,null,"1c868cc0",null)),g=m.exports;n["a"].use(h["a"]);var v=[{path:"/",name:"home",component:g},{path:"/fixed-size",name:"fixed-size",component:function(){return Promise.all([i.e("chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode"),i.e("fixed-size")]).then(i.bind(null,"c227"))}},{path:"/dynamic-size",name:"dynamic-size",component:function(){return Promise.all([i.e("chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode"),i.e("dynamic-size")]).then(i.bind(null,"960e"))}},{path:"/horizontal",name:"horizontal",component:function(){return Promise.all([i.e("chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode"),i.e("horizontal")]).then(i.bind(null,"a2ab"))}},{path:"/infinite-loading",name:"infinite-loading",component:function(){return Promise.all([i.e("chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode"),i.e("infinite-loading")]).then(i.bind(null,"077d"))}},{path:"/keep-state",name:"keep-state",component:function(){return Promise.all([i.e("chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode"),i.e("keep-state")]).then(i.bind(null,"0786"))}},{path:"/chat-room",name:"chat-room",component:function(){return Promise.all([i.e("chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode"),i.e("chat-room")]).then(i.bind(null,"cbe9"))}},{path:"/page-mode",name:"page-mode",component:function(){return Promise.all([i.e("chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode"),i.e("page-mode")]).then(i.bind(null,"6e70"))}}];var y=new h["a"]({routes:v}),z=y,b=i("e878"),S=(i("99af"),i("d81d"),i("4160"),i("caad"),i("4ec9"),i("2532"),i("3ca3"),i("159b"),i("ddb0"),i("d4ec")),k=i("bee2"),x={FRONT:"FRONT",BEHIND:"BEHIND"},C={INIT:"INIT",FIXED:"FIXED",DYNAMIC:"DYNAMIC"},O=2,T=function(){function e(t,i){Object(S["a"])(this,e),this.init(t,i)}return Object(k["a"])(e,[{key:"init",value:function(e,t){this.param=e,this.callUpdate=t,this.sizes=new Map,this.firstRangeTotalSize=0,this.firstRangeAverageSize=0,this.lastCalcIndex=0,this.fixedSizeValue=0,this.calcType=C.INIT,this.offset=0,this.direction="",this.range=Object.create(null),e&&this.checkRange(0,e.keeps-1)}},{key:"destroy",value:function(){this.init(null,null)}},{key:"getRange",value:function(){var e=Object.create(null);return e.start=this.range.start,e.end=this.range.end,e.padFront=this.range.padFront,e.padBehind=this.range.padBehind,e}},{key:"isBehind",value:function(){return this.direction===x.BEHIND}},{key:"isFront",value:function(){return this.direction===x.FRONT}},{key:"getOffset",value:function(e){return(e<1?0:this.getIndexOffset(e))+this.param.slotHeaderSize}},{key:"updateParam",value:function(e,t){var i=this;this.param&&e in this.param&&("uniqueIds"===e&&t.length<this.param[e].length&&this.sizes.forEach((function(e,n){t.includes(n)||i.sizes.delete(n)})),this.param[e]=t)}},{key:"saveSize",value:function(e,t){this.sizes.set(e,t),this.calcType===C.INIT?(this.fixedSizeValue=t,this.calcType=C.FIXED):this.calcType===C.FIXED&&this.fixedSizeValue!==t&&(this.calcType=C.DYNAMIC,delete this.fixedSizeValue),this.calcType!==C.FIXED&&"undefined"!==typeof this.firstRangeTotalSize&&(this.sizes.size<Math.min(this.param.keeps,this.param.uniqueIds.length)?(this.firstRangeTotalSize=this.firstRangeTotalSize+t,this.firstRangeAverageSize=Math.round(this.firstRangeTotalSize/this.sizes.size)):delete this.firstRangeTotalSize)}},{key:"handleDataSourcesChange",value:function(){var e=this.range.start;this.isFront()?e-=O:this.isBehind()&&(e+=O),e=Math.max(e,0),this.updateRange(this.range.start,this.getEndByStart(e))}},{key:"handleSlotSizeChange",value:function(){this.handleDataSourcesChange()}},{key:"handleScroll",value:function(e){this.direction=e<this.offset?x.FRONT:x.BEHIND,this.offset=e,this.direction===x.FRONT?this.handleFront():this.direction===x.BEHIND&&this.handleBehind()}},{key:"handleFront",value:function(){var e=this.getScrollOvers();if(!(e>this.range.start)){var t=Math.max(e-this.param.buffer,0);this.checkRange(t,this.getEndByStart(t))}}},{key:"handleBehind",value:function(){var e=this.getScrollOvers();e<this.range.start+this.param.buffer||this.checkRange(e,this.getEndByStart(e))}},{key:"getScrollOvers",value:function(){var e=this.offset-this.param.slotHeaderSize;if(e<=0)return 0;if(this.isFixedType())return Math.floor(e/this.fixedSizeValue);var t=0,i=0,n=0,a=this.param.uniqueIds.length;while(t<=a){if(i=t+Math.floor((a-t)/2),n=this.getIndexOffset(i),n===e)return i;n<e?t=i+1:n>e&&(a=i-1)}return t>0?--t:0}},{key:"getIndexOffset",value:function(e){if(!e)return 0;for(var t=0,i=0,n=0;n<e;n++)i=this.sizes.get(this.param.uniqueIds[n]),t+=i||this.getEstimateSize();return this.lastCalcIndex=Math.max(this.lastCalcIndex,e-1),this.lastCalcIndex=Math.min(this.lastCalcIndex,this.getLastIndex()),t}},{key:"isFixedType",value:function(){return this.calcType===C.FIXED}},{key:"getLastIndex",value:function(){return this.param.uniqueIds.length-1}},{key:"checkRange",value:function(e,t){var i=this.param.keeps,n=this.param.uniqueIds.length;n<=i?(e=0,t=this.getLastIndex()):t-e<i-1&&(e=t-i+1),this.range.start!==e&&this.updateRange(e,t)}},{key:"updateRange",value:function(e,t){this.range.start=e,this.range.end=t,this.range.padFront=this.getPadFront(),this.range.padBehind=this.getPadBehind(),this.callUpdate(this.getRange())}},{key:"getEndByStart",value:function(e){var t=e+this.param.keeps-1,i=Math.min(t,this.getLastIndex());return i}},{key:"getPadFront",value:function(){return this.isFixedType()?this.fixedSizeValue*this.range.start:this.getIndexOffset(this.range.start)}},{key:"getPadBehind",value:function(){var e=this.range.end,t=this.getLastIndex();return this.isFixedType()?(t-e)*this.fixedSizeValue:this.lastCalcIndex===t?this.getIndexOffset(t)-this.getIndexOffset(e):(t-e)*this.getEstimateSize()}},{key:"getEstimateSize",value:function(){return this.isFixedType()?this.fixedSizeValue:this.firstRangeAverageSize||this.param.estimateSize}}]),e}(),E=(i("a9e3"),{dataKey:{type:String,required:!0},dataSources:{type:Array,required:!0},dataComponent:{type:[Object,Function],required:!0},keeps:{type:Number,default:30},extraProps:{type:Object},estimateSize:{type:Number,default:50},direction:{type:String,default:"vertical"},start:{type:Number,default:0},offset:{type:Number,default:0},topThreshold:{type:Number,default:0},bottomThreshold:{type:Number,default:0},pageMode:{type:Boolean,default:!1},rootTag:{type:String,default:"div"},wrapTag:{type:String,default:"div"},wrapClass:{type:String,default:""},wrapStyle:{type:Object},itemTag:{type:String,default:"div"},itemClass:{type:String,default:""},itemClassAdd:{type:Function},itemStyle:{type:Object},headerTag:{type:String,default:"div"},headerClass:{type:String,default:""},headerStyle:{type:Object},footerTag:{type:String,default:"div"},footerClass:{type:String,default:""},footerStyle:{type:Object}}),I={index:{type:Number},event:{type:String},tag:{type:String},horizontal:{type:Boolean},source:{type:Object},component:{type:[Object,Function]},uniqueKey:{type:String},extraProps:{type:Object}},_={event:{type:String},uniqueKey:{type:String},tag:{type:String},horizontal:{type:Boolean}},w={created:function(){this.shapeKey=this.horizontal?"offsetWidth":"offsetHeight"},mounted:function(){var e=this;"undefined"!==typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((function(){e.dispatchSizeChange()})),this.resizeObserver.observe(this.$el))},updated:function(){this.dispatchSizeChange()},beforeDestroy:function(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)},methods:{getCurrentSize:function(){return this.$el?this.$el[this.shapeKey]:0},dispatchSizeChange:function(){this.$parent.$emit(this.event,this.uniqueKey,this.getCurrentSize(),this.hasInitial)}}},F=n["a"].component("virtual-list-item",{mixins:[w],props:I,render:function(e){var t=this.tag,i=this.component,n=this.extraProps,a=void 0===n?{}:n,s=this.index;return a.source=this.source,a.index=s,e(t,{attrs:{role:"item"}},[e(i,{props:a})])}}),R=n["a"].component("virtual-list-slot",{mixins:[w],props:_,render:function(e){var t=this.tag,i=this.uniqueKey;return e(t,{attrs:{role:i}},this.$slots.default)}}),P={ITEM:"item_resize",SLOT:"slot_resize"},j={HEADER:"header",FOOTER:"footer"},M=n["a"].component("virtual-list",{props:E,data:function(){return{range:null}},watch:{"dataSources.length":function(){this.virtual.updateParam("uniqueIds",this.getUniqueIdFromDataSources()),this.virtual.handleDataSourcesChange()},start:function(e){this.scrollToIndex(e)},offset:function(e){this.scrollToOffset(e)}},created:function(){this.isHorizontal="horizontal"===this.direction,this.directionKey=this.isHorizontal?"scrollLeft":"scrollTop",this.installVirtual(),this.$on(P.ITEM,this.onItemResized),(this.$slots.header||this.$slots.footer)&&this.$on(P.SLOT,this.onSlotResized)},activated:function(){this.scrollToOffset(this.virtual.offset)},mounted:function(){if(this.start?this.scrollToIndex(this.start):this.offset&&this.scrollToOffset(this.offset),this.pageMode){document.addEventListener("scroll",this.onScroll,{passive:!1});var e=this.$refs.root;e&&this.virtual.updateParam("slotHeaderSize",e[this.isHorizontal?"offsetLeft":"offsetTop"])}},beforeDestroy:function(){this.virtual.destroy()},methods:{getSize:function(e){return this.virtual.sizes.get(e)},getSizes:function(){return this.virtual.sizes.size},getOffset:function(){if(this.pageMode)return document.documentElement[this.directionKey];var e=this.$refs.root;return e?Math.ceil(e[this.directionKey]):0},getClientSize:function(){var e=this.isHorizontal?"clientWidth":"clientHeight";if(this.pageMode)return document.documentElement[e];var t=this.$refs.root;return t?t[e]:0},getScrollSize:function(){var e=this.isHorizontal?"scrollWidth":"scrollHeight";if(this.pageMode)return document.documentElement[e];var t=this.$refs.root;return t?t[e]:0},scrollToOffset:function(e){if(this.pageMode)document.documentElement[this.directionKey]=e;else{var t=this.$refs.root;t&&(t[this.directionKey]=e)}},scrollToIndex:function(e){if(e>=this.dataSources.length-1)this.scrollToBottom();else{var t=this.virtual.getOffset(e);this.scrollToOffset(t)}},scrollToBottom:function(){var e=this,t=this.$refs.shepherd;if(t){var i=t[this.isHorizontal?"offsetLeft":"offsetTop"];this.scrollToOffset(i),setTimeout((function(){e.getOffset()+e.getClientSize()<e.getScrollSize()&&e.scrollToBottom()}),3)}},reset:function(){this.virtual.destroy(),this.scrollToOffset(0),this.installVirtual()},installVirtual:function(){this.virtual=new T({slotHeaderSize:0,slotFooterSize:0,keeps:this.keeps,estimateSize:this.estimateSize,buffer:Math.round(this.keeps/3),uniqueIds:this.getUniqueIdFromDataSources()},this.onRangeChanged),this.range=this.virtual.getRange()},getUniqueIdFromDataSources:function(){var e=this;return this.dataSources.map((function(t){return t[e.dataKey]}))},onItemResized:function(e,t){this.virtual.saveSize(e,t),this.$emit("resized",e,t)},onSlotResized:function(e,t,i){e===j.HEADER?this.virtual.updateParam("slotHeaderSize",t):e===j.FOOTER&&this.virtual.updateParam("slotFooterSize",t),i&&this.virtual.handleSlotSizeChange()},onRangeChanged:function(e){this.range=e},onScroll:function(e){var t=this.getOffset(),i=this.getClientSize(),n=this.getScrollSize();t<0||t+i>n||!n||(this.virtual.handleScroll(t),this.emitEvent(t,i,n,e))},emitEvent:function(e,t,i,n){this.$emit("scroll",n,this.virtual.getRange()),this.virtual.isFront()&&this.dataSources.length&&e-this.topThreshold<=0?this.$emit("totop"):this.virtual.isBehind()&&e+t+this.bottomThreshold>=i&&this.$emit("tobottom")},getRenderSlots:function(e){for(var t=[],i=this.range,n=i.start,a=i.end,s=this.dataSources,r=this.dataKey,o=this.itemClass,l=this.itemTag,c=this.itemStyle,h=this.isHorizontal,u=this.extraProps,d=this.dataComponent,f=n;f<=a;f++){var p=s[f];p?Object.prototype.hasOwnProperty.call(p,r)?t.push(e(F,{props:{index:f,tag:l,event:P.ITEM,horizontal:h,uniqueKey:p[r],source:p,extraProps:u,component:d},style:c,class:"".concat(o).concat(this.itemClassAdd?" "+this.itemClassAdd(f):"")})):console.warn("Cannot get the data-key '".concat(r,"' from data-sources.")):console.warn("Cannot get the index '".concat(f,"' from data-sources."))}return t}},render:function(e){var t=this.$slots,i=t.header,n=t.footer,a=this.range,s=a.padFront,r=a.padBehind,o=this.isHorizontal,l=this.pageMode,c=this.rootTag,h=this.wrapTag,u=this.wrapClass,d=this.wrapStyle,f=this.headerTag,p=this.headerClass,m=this.headerStyle,g=this.footerTag,v=this.footerClass,y=this.footerStyle,z={padding:o?"0px ".concat(r,"px 0px ").concat(s,"px"):"".concat(s,"px 0px ").concat(r,"px")},b=d?Object.assign({},d,z):z;return e(c,{ref:"root",on:{"&scroll":!l&&this.onScroll}},[i?e(R,{class:p,style:m,props:{tag:f,event:P.SLOT,uniqueKey:j.HEADER}},i):null,e(h,{class:u,attrs:{role:"group"},style:b},this.getRenderSlots(e)),n?e(R,{class:v,style:y,props:{tag:g,event:P.SLOT,uniqueKey:j.FOOTER}},n):null,e("div",{ref:"shepherd",style:{width:o?"0px":"100%",height:o?"100%":"0px"}})])}}),H=M,D=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"introduction",domProps:{innerHTML:e._s(e.description)}})},$=[],B={name:"introduction",props:{description:{type:String}}},N=B,q=(i("de3a"),Object(r["a"])(N,D,$,!1,null,"0c507b69",null)),V=q.exports,A=function(){var e=this,t=e.$createElement,i=e._self._c||t;return e.code?i("pre",{class:e.type,domProps:{innerHTML:e._s(e.encode(e.code))}}):e._e()},L=[],K=(i("ac1f"),i("5319"),{name:"code-high-light",props:{type:{type:String,required:!0},code:{type:String,required:!0}},mounted:function(){"undefined"!==typeof window.hljs&&this.$el.textContent&&window.hljs.highlightBlock(this.$el)},methods:{encode:function(e){return"html"===this.type&&(e=e.replace(/</g,"&lt;"),e=e.replace(/>/g,"&gt;")),e=e.replace(/\s/,""),e}}}),W=K,U=(i("595a"),Object(r["a"])(W,A,L,!1,null,"99fd125a",null)),G=U.exports,X=function(){var e=this,t=e.$createElement,i=e._self._c||t;return e.isMobile?e._e():i("a",{staticClass:"github-corner",attrs:{href:e.url,"aria-label":"View source on GitHub"}},[e._v(" GITHUB ")])},Y=[],J=i("835c"),Q=i("3f05"),Z={name:"github-corner",data:function(){return{url:"",size:80,isMobile:J["a"]}},mounted:function(){this.url=Object(Q["a"])()}},ee=Z,te=(i("8388"),Object(r["a"])(ee,X,Y,!1,null,"4799d028",null)),ie=te.exports,ne=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"tab"},[i("div",{staticClass:"tab-item view",class:{active:e.isView},on:{click:e.eventClickView}},[e._v("VIEW")]),i("div",{staticClass:"tab-item code",class:{active:!e.isView},on:{click:e.eventClickCode}},[e._v("CODE")]),i("a",{directives:[{name:"show",rawName:"v-show",value:!e.isView,expression:"!isView"}],staticClass:"complete-code-url",attrs:{target:"_blank",href:e.completeCodeUrl}},[e._v("COMPLETE CODE")])])},ae=[],se=i("b95e"),re={name:"tab",data:function(){return{completeCodeUrl:"",active:se["a"]}},computed:{isView:function(){return this.active===se["b"].VIEW}},mounted:function(){this.completeCodeUrl=Object(Q["a"])()},methods:{eventClickView:function(){this.active=se["b"].VIEW,this.emitEvent()},eventClickCode:function(){this.active=se["b"].CODE,this.emitEvent()},emitEvent:function(){this.$emit("tab-change",this.active)}}},oe=re,le=(i("2345"),Object(r["a"])(oe,ne,ae,!1,null,"13711752",null)),ce=le.exports;n["a"].component("virtual-list",H),n["a"].component(V.name,V),n["a"].component(G.name,G),n["a"].component(ie.name,ie),n["a"].component(ce.name,ce),n["a"].component("github-button",b["a"]),n["a"].config.devtools=!1,n["a"].config.productionTip=!1,new n["a"]({router:z,render:function(e){return e(c)}}).$mount("#app")},"595a":function(e,t,i){"use strict";var n=i("a5ff"),a=i.n(n);a.a},"67ef":function(e,t,i){},"7c55":function(e,t,i){"use strict";var n=i("2395"),a=i.n(n);a.a},"835c":function(e,t,i){"use strict";i.d(t,"a",(function(){return r}));i("ac1f"),i("466d");var n=navigator.userAgent,a=!!n.match(/Android/i),s=!!n.match(/iPhone|iPad|iPod/i),r=a||s},8388:function(e,t,i){"use strict";var n=i("b6af"),a=i.n(n);a.a},a5ff:function(e,t,i){},b6af:function(e,t,i){},b95e:function(e,t,i){"use strict";i.d(t,"b",(function(){return n})),i.d(t,"a",(function(){return a}));var n={VIEW:1,CODE:2},a=n.VIEW},de3a:function(e,t,i){"use strict";var n=i("2f31"),a=i.n(n);a.a}});
\ No newline at end of file
+(function(e){function t(t){for(var n,a,o=t[0],l=t[1],c=t[2],u=0,h=[];u<o.length;u++)a=o[u],Object.prototype.hasOwnProperty.call(s,a)&&s[a]&&h.push(s[a][0]),s[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);d&&d(t);while(h.length)h.shift()();return r.push.apply(r,c||[]),i()}function i(){for(var e,t=0;t<r.length;t++){for(var i=r[t],n=!0,a=1;a<i.length;a++){var o=i[a];0!==s[o]&&(n=!1)}n&&(r.splice(t--,1),e=l(l.s=i[0]))}return e}var n={},a={app:0},s={app:0},r=[];function o(e){return l.p+"js/"+({"chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode":"chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode","chat-room":"chat-room","dynamic-size":"dynamic-size","fixed-size":"fixed-size",horizontal:"horizontal","infinite-loading":"infinite-loading","keep-state":"keep-state","page-mode":"page-mode"}[e]||e)+"."+{"chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode":"fea2e070","chat-room":"37e520ca","dynamic-size":"debe7fb6","fixed-size":"fab2dd0f",horizontal:"6faaaf18","infinite-loading":"afbe430b","keep-state":"d5fcfbd1","page-mode":"ff8e6c9b"}[e]+".js"}function l(t){if(n[t])return n[t].exports;var i=n[t]={i:t,l:!1,exports:{}};return e[t].call(i.exports,i,i.exports,l),i.l=!0,i.exports}l.e=function(e){var t=[],i={"chat-room":1,"dynamic-size":1,"fixed-size":1,horizontal:1,"infinite-loading":1,"keep-state":1,"page-mode":1};a[e]?t.push(a[e]):0!==a[e]&&i[e]&&t.push(a[e]=new Promise((function(t,i){for(var n="css/"+({"chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode":"chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode","chat-room":"chat-room","dynamic-size":"dynamic-size","fixed-size":"fixed-size",horizontal:"horizontal","infinite-loading":"infinite-loading","keep-state":"keep-state","page-mode":"page-mode"}[e]||e)+"."+{"chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode":"31d6cfe0","chat-room":"9f37805a","dynamic-size":"9013d8ce","fixed-size":"840ec49f",horizontal:"50e26ffa","infinite-loading":"4b238c18","keep-state":"2736386a","page-mode":"bb1117ff"}[e]+".css",s=l.p+n,r=document.getElementsByTagName("link"),o=0;o<r.length;o++){var c=r[o],u=c.getAttribute("data-href")||c.getAttribute("href");if("stylesheet"===c.rel&&(u===n||u===s))return t()}var h=document.getElementsByTagName("style");for(o=0;o<h.length;o++){c=h[o],u=c.getAttribute("data-href");if(u===n||u===s)return t()}var d=document.createElement("link");d.rel="stylesheet",d.type="text/css",d.onload=t,d.onerror=function(t){var n=t&&t.target&&t.target.src||s,r=new Error("Loading CSS chunk "+e+" failed.\n("+n+")");r.code="CSS_CHUNK_LOAD_FAILED",r.request=n,delete a[e],d.parentNode.removeChild(d),i(r)},d.href=s;var f=document.getElementsByTagName("head")[0];f.appendChild(d)})).then((function(){a[e]=0})));var n=s[e];if(0!==n)if(n)t.push(n[2]);else{var r=new Promise((function(t,i){n=s[e]=[t,i]}));t.push(n[2]=r);var c,u=document.createElement("script");u.charset="utf-8",u.timeout=120,l.nc&&u.setAttribute("nonce",l.nc),u.src=o(e);var h=new Error;c=function(t){u.onerror=u.onload=null,clearTimeout(d);var i=s[e];if(0!==i){if(i){var n=t&&("load"===t.type?"missing":t.type),a=t&&t.target&&t.target.src;h.message="Loading chunk "+e+" failed.\n("+n+": "+a+")",h.name="ChunkLoadError",h.type=n,h.request=a,i[1](h)}s[e]=void 0}};var d=setTimeout((function(){c({type:"timeout",target:u})}),12e4);u.onerror=u.onload=c,document.head.appendChild(u)}return Promise.all(t)},l.m=e,l.c=n,l.d=function(e,t,i){l.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},l.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(l.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)l.d(i,n,function(t){return e[t]}.bind(null,n));return i},l.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="",l.oe=function(e){throw console.error(e),e};var c=window["webpackJsonp"]=window["webpackJsonp"]||[],u=c.push.bind(c);c.push=t,c=c.slice();for(var h=0;h<c.length;h++)t(c[h]);var d=u;r.push([0,"chunk-vendors"]),i()})({0:function(e,t,i){e.exports=i("56d7")},"187e":function(e,t,i){"use strict";var n=i("1a2b"),a=i.n(n);a.a},"1a2b":function(e,t,i){},2345:function(e,t,i){"use strict";var n=i("67ef"),a=i.n(n);a.a},2395:function(e,t,i){},"2f31":function(e,t,i){},"3f05":function(e,t,i){"use strict";t["a"]=function(){var e=(location.hash||"").substr(2);return e?"https://github.com/tangbc/vue-virtual-scroll-list/tree/master/example/src/views/".concat(e,"/Main.vue"):"https://github.com/tangbc/vue-virtual-scroll-list"}},"56d7":function(e,t,i){"use strict";i.r(t);i("b0c0"),i("e260"),i("e6cf"),i("cca6"),i("a79d");var n=i("e832"),a=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{attrs:{id:"app"}},[i("div",{attrs:{id:"nav"}},[i("router-link",{attrs:{to:"/"}},[e._v("home")]),i("span",{staticClass:"line"},[e._v("|")]),i("router-link",{attrs:{to:"/fixed-size"}},[e._v("fixed size")]),i("span",{staticClass:"line"},[e._v("|")]),i("router-link",{attrs:{to:"/dynamic-size"}},[e._v("dynamic size")]),i("span",{staticClass:"line"},[e._v("|")]),i("router-link",{attrs:{to:"/horizontal"}},[e._v("horizontal")]),i("span",{staticClass:"line"},[e._v("|")]),i("router-link",{attrs:{to:"/infinite-loading"}},[e._v("infinite loading")]),i("span",{staticClass:"line"},[e._v("|")]),i("router-link",{attrs:{to:"/keep-state"}},[e._v("keep state")]),i("span",{staticClass:"line"},[e._v("|")]),i("router-link",{attrs:{to:"/page-mode"}},[e._v("page mode")]),i("span",{staticClass:"line"},[e._v("|")]),i("router-link",{attrs:{to:"/chat-room"}},[e._v("chat room")])],1),i("router-view")],1)},s=[],r=(i("7c55"),i("2877")),o={},l=Object(r["a"])(o,a,s,!1,null,null,null),c=l.exports,u=(i("d3b7"),i("8c4f")),h=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"example"},[i("github-corner"),i("h2",{staticClass:"name"},[e._v(" vue-virtual-scroll-list ")]),i("div",{staticClass:"desc"},[e._v("⚡️ A vue component support big amount data list with high scroll performance.")]),i("div",{staticClass:"icons"},[i("span",{staticClass:"btn"},[i("github-button",{attrs:{href:"https://github.com/tangbc/vue-virtual-scroll-list/issues","data-color-scheme":"no-preference: dark; light: dark; dark: dark;","data-size":"large","data-show-count":"true","aria-label":"Issue tangbc/vue-virtual-scroll-list on GitHub"}},[e._v("Issue")])],1),i("span",{staticClass:"btn"},[i("github-button",{attrs:{href:"https://github.com/tangbc/vue-virtual-scroll-list","data-color-scheme":"no-preference: dark; light: dark; dark: dark;","data-size":"large","data-show-count":"true","aria-label":"Star tangbc/vue-virtual-scroll-list on GitHub"}},[e._v("Star")])],1),i("span",{staticClass:"btn"},[i("github-button",{attrs:{href:"https://github.com/tangbc/vue-virtual-scroll-list/fork","data-color-scheme":"no-preference: dark; light: dark; dark: dark;","data-size":"large","data-show-count":"true","aria-label":"Fork tangbc/vue-virtual-scroll-list on GitHub"}},[e._v("Fork")])],1),i("span",{staticClass:"btn"},[i("github-button",{attrs:{href:"https://github.com/tangbc/vue-virtual-scroll-list/subscription","data-color-scheme":"no-preference: dark; light: dark; dark: dark;","data-size":"large","data-show-count":"true","aria-label":"Watch tangbc/vue-virtual-scroll-list on GitHub"}},[e._v("Watch")])],1)]),i("h3",{staticClass:"title"},[e._v("What's news in v2.0")]),e._m(0),i("h3",{staticClass:"title"},[e._v("Contributions")]),i("div",[e._v("Welcome to improve this component with any issue, pull request or code review. ✋")])],1)},d=[function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ul",[i("li",[e._v("Support header, footer slot, horizontal direction.")]),i("li",[e._v("Code structure is more reasonable and good maintainability.")]),i("li",[e._v("Abandoned v-for mode and variable mode, all condition unify into one mode.")]),i("li",[e._v("Don't have to care about each item size, in sometimes it's difficult to know that.")])])}],f={name:"index",data:function(){return{}}},p=f,m=(i("187e"),Object(r["a"])(p,h,d,!1,null,"1c868cc0",null)),g=m.exports;n["a"].use(u["a"]);var v=[{path:"/",name:"home",component:g},{path:"/fixed-size",name:"fixed-size",component:function(){return Promise.all([i.e("chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode"),i.e("fixed-size")]).then(i.bind(null,"c227"))}},{path:"/dynamic-size",name:"dynamic-size",component:function(){return Promise.all([i.e("chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode"),i.e("dynamic-size")]).then(i.bind(null,"960e"))}},{path:"/horizontal",name:"horizontal",component:function(){return Promise.all([i.e("chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode"),i.e("horizontal")]).then(i.bind(null,"a2ab"))}},{path:"/infinite-loading",name:"infinite-loading",component:function(){return Promise.all([i.e("chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode"),i.e("infinite-loading")]).then(i.bind(null,"077d"))}},{path:"/keep-state",name:"keep-state",component:function(){return Promise.all([i.e("chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode"),i.e("keep-state")]).then(i.bind(null,"0786"))}},{path:"/chat-room",name:"chat-room",component:function(){return Promise.all([i.e("chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode"),i.e("chat-room")]).then(i.bind(null,"cbe9"))}},{path:"/page-mode",name:"page-mode",component:function(){return Promise.all([i.e("chat-room~dynamic-size~fixed-size~horizontal~infinite-loading~keep-state~page-mode"),i.e("page-mode")]).then(i.bind(null,"6e70"))}}];var y=new u["a"]({routes:v}),z=y,b=i("e878"),S=(i("99af"),i("d81d"),i("4160"),i("caad"),i("4ec9"),i("2532"),i("3ca3"),i("159b"),i("ddb0"),i("d4ec")),k=i("bee2"),x={FRONT:"FRONT",BEHIND:"BEHIND"},C={INIT:"INIT",FIXED:"FIXED",DYNAMIC:"DYNAMIC"},O=2,T=function(){function e(t,i){Object(S["a"])(this,e),this.init(t,i)}return Object(k["a"])(e,[{key:"init",value:function(e,t){this.param=e,this.callUpdate=t,this.sizes=new Map,this.firstRangeTotalSize=0,this.firstRangeAverageSize=0,this.lastCalcIndex=0,this.fixedSizeValue=0,this.calcType=C.INIT,this.offset=0,this.direction="",this.range=Object.create(null),e&&this.checkRange(0,e.keeps-1)}},{key:"destroy",value:function(){this.init(null,null)}},{key:"getRange",value:function(){var e=Object.create(null);return e.start=this.range.start,e.end=this.range.end,e.padFront=this.range.padFront,e.padBehind=this.range.padBehind,e}},{key:"isBehind",value:function(){return this.direction===x.BEHIND}},{key:"isFront",value:function(){return this.direction===x.FRONT}},{key:"getOffset",value:function(e){return(e<1?0:this.getIndexOffset(e))+this.param.slotHeaderSize}},{key:"updateParam",value:function(e,t){var i=this;this.param&&e in this.param&&("uniqueIds"===e&&t.length<this.param[e].length&&this.sizes.forEach((function(e,n){t.includes(n)||i.sizes.delete(n)})),this.param[e]=t)}},{key:"saveSize",value:function(e,t){this.sizes.set(e,t),this.calcType===C.INIT?(this.fixedSizeValue=t,this.calcType=C.FIXED):this.calcType===C.FIXED&&this.fixedSizeValue!==t&&(this.calcType=C.DYNAMIC,delete this.fixedSizeValue),this.calcType!==C.FIXED&&"undefined"!==typeof this.firstRangeTotalSize&&(this.sizes.size<Math.min(this.param.keeps,this.param.uniqueIds.length)?(this.firstRangeTotalSize=this.firstRangeTotalSize+t,this.firstRangeAverageSize=Math.round(this.firstRangeTotalSize/this.sizes.size)):delete this.firstRangeTotalSize)}},{key:"handleDataSourcesChange",value:function(){var e=this.range.start;this.isFront()?e-=O:this.isBehind()&&(e+=O),e=Math.max(e,0),this.updateRange(this.range.start,this.getEndByStart(e))}},{key:"handleSlotSizeChange",value:function(){this.handleDataSourcesChange()}},{key:"handleScroll",value:function(e){this.direction=e<this.offset?x.FRONT:x.BEHIND,this.offset=e,this.direction===x.FRONT?this.handleFront():this.direction===x.BEHIND&&this.handleBehind()}},{key:"handleFront",value:function(){var e=this.getScrollOvers();if(!(e>this.range.start)){var t=Math.max(e-this.param.buffer,0);this.checkRange(t,this.getEndByStart(t))}}},{key:"handleBehind",value:function(){var e=this.getScrollOvers();e<this.range.start+this.param.buffer||this.checkRange(e,this.getEndByStart(e))}},{key:"getScrollOvers",value:function(){var e=this.offset-this.param.slotHeaderSize;if(e<=0)return 0;if(this.isFixedType())return Math.floor(e/this.fixedSizeValue);var t=0,i=0,n=0,a=this.param.uniqueIds.length;while(t<=a){if(i=t+Math.floor((a-t)/2),n=this.getIndexOffset(i),n===e)return i;n<e?t=i+1:n>e&&(a=i-1)}return t>0?--t:0}},{key:"getIndexOffset",value:function(e){if(!e)return 0;for(var t=0,i=0,n=0;n<e;n++)i=this.sizes.get(this.param.uniqueIds[n]),t+=i||this.getEstimateSize();return this.lastCalcIndex=Math.max(this.lastCalcIndex,e-1),this.lastCalcIndex=Math.min(this.lastCalcIndex,this.getLastIndex()),t}},{key:"isFixedType",value:function(){return this.calcType===C.FIXED}},{key:"getLastIndex",value:function(){return this.param.uniqueIds.length-1}},{key:"checkRange",value:function(e,t){var i=this.param.keeps,n=this.param.uniqueIds.length;n<=i?(e=0,t=this.getLastIndex()):t-e<i-1&&(e=t-i+1),this.range.start!==e&&this.updateRange(e,t)}},{key:"updateRange",value:function(e,t){this.range.start=e,this.range.end=t,this.range.padFront=this.getPadFront(),this.range.padBehind=this.getPadBehind(),this.callUpdate(this.getRange())}},{key:"getEndByStart",value:function(e){var t=e+this.param.keeps-1,i=Math.min(t,this.getLastIndex());return i}},{key:"getPadFront",value:function(){return this.isFixedType()?this.fixedSizeValue*this.range.start:this.getIndexOffset(this.range.start)}},{key:"getPadBehind",value:function(){var e=this.range.end,t=this.getLastIndex();return this.isFixedType()?(t-e)*this.fixedSizeValue:this.lastCalcIndex===t?this.getIndexOffset(t)-this.getIndexOffset(e):(t-e)*this.getEstimateSize()}},{key:"getEstimateSize",value:function(){return this.isFixedType()?this.fixedSizeValue:this.firstRangeAverageSize||this.param.estimateSize}}]),e}(),E=(i("a9e3"),{dataKey:{type:String,required:!0},dataSources:{type:Array,required:!0},dataComponent:{type:[Object,Function],required:!0},keeps:{type:Number,default:30},extraProps:{type:Object},estimateSize:{type:Number,default:50},direction:{type:String,default:"vertical"},start:{type:Number,default:0},offset:{type:Number,default:0},topThreshold:{type:Number,default:0},bottomThreshold:{type:Number,default:0},pageMode:{type:Boolean,default:!1},rootTag:{type:String,default:"div"},wrapTag:{type:String,default:"div"},wrapClass:{type:String,default:""},wrapStyle:{type:Object},itemTag:{type:String,default:"div"},itemClass:{type:String,default:""},itemClassAdd:{type:Function},itemStyle:{type:Object},headerTag:{type:String,default:"div"},headerClass:{type:String,default:""},headerStyle:{type:Object},footerTag:{type:String,default:"div"},footerClass:{type:String,default:""},footerStyle:{type:Object}}),I={index:{type:Number},event:{type:String},tag:{type:String},horizontal:{type:Boolean},source:{type:Object},component:{type:[Object,Function]},uniqueKey:{type:String},extraProps:{type:Object}},_={event:{type:String},uniqueKey:{type:String},tag:{type:String},horizontal:{type:Boolean}},w={created:function(){this.shapeKey=this.horizontal?"offsetWidth":"offsetHeight"},mounted:function(){var e=this;"undefined"!==typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((function(){e.dispatchSizeChange()})),this.resizeObserver.observe(this.$el))},updated:function(){this.dispatchSizeChange()},beforeDestroy:function(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)},methods:{getCurrentSize:function(){return this.$el?this.$el[this.shapeKey]:0},dispatchSizeChange:function(){this.$parent.$emit(this.event,this.uniqueKey,this.getCurrentSize(),this.hasInitial)}}},F=n["a"].component("virtual-list-item",{mixins:[w],props:I,render:function(e){var t=this.tag,i=this.component,n=this.extraProps,a=void 0===n?{}:n,s=this.index;return a.source=this.source,a.index=s,e(t,{attrs:{role:"item"}},[e(i,{props:a})])}}),R=n["a"].component("virtual-list-slot",{mixins:[w],props:_,render:function(e){var t=this.tag,i=this.uniqueKey;return e(t,{attrs:{role:i}},this.$slots.default)}}),P={ITEM:"item_resize",SLOT:"slot_resize"},M={HEADER:"header",FOOTER:"footer"},j=n["a"].component("virtual-list",{props:E,data:function(){return{range:null}},watch:{"dataSources.length":function(){this.virtual.updateParam("uniqueIds",this.getUniqueIdFromDataSources()),this.virtual.handleDataSourcesChange()},start:function(e){this.scrollToIndex(e)},offset:function(e){this.scrollToOffset(e)}},created:function(){this.isHorizontal="horizontal"===this.direction,this.directionKey=this.isHorizontal?"scrollLeft":"scrollTop",this.installVirtual(),this.$on(P.ITEM,this.onItemResized),(this.$slots.header||this.$slots.footer)&&this.$on(P.SLOT,this.onSlotResized)},activated:function(){this.scrollToOffset(this.virtual.offset)},mounted:function(){this.start?this.scrollToIndex(this.start):this.offset&&this.scrollToOffset(this.offset),this.pageMode&&(this.updatePageModeFront(),document.addEventListener("scroll",this.onScroll,{passive:!1}))},beforeDestroy:function(){this.virtual.destroy(),this.pageMode&&document.removeEventListener("scroll",this.onScroll)},methods:{getSize:function(e){return this.virtual.sizes.get(e)},getSizes:function(){return this.virtual.sizes.size},getOffset:function(){if(this.pageMode)return document.documentElement[this.directionKey];var e=this.$refs.root;return e?Math.ceil(e[this.directionKey]):0},getClientSize:function(){var e=this.isHorizontal?"clientWidth":"clientHeight";if(this.pageMode)return document.documentElement[e];var t=this.$refs.root;return t?t[e]:0},getScrollSize:function(){var e=this.isHorizontal?"scrollWidth":"scrollHeight";if(this.pageMode)return document.documentElement[e];var t=this.$refs.root;return t?t[e]:0},scrollToOffset:function(e){if(this.pageMode)document.documentElement[this.directionKey]=e;else{var t=this.$refs.root;t&&(t[this.directionKey]=e)}},scrollToIndex:function(e){if(e>=this.dataSources.length-1)this.scrollToBottom();else{var t=this.virtual.getOffset(e);this.scrollToOffset(t)}},scrollToBottom:function(){var e=this,t=this.$refs.shepherd;if(t){var i=t[this.isHorizontal?"offsetLeft":"offsetTop"];this.scrollToOffset(i),setTimeout((function(){e.getOffset()+e.getClientSize()<e.getScrollSize()&&e.scrollToBottom()}),3)}},updatePageModeFront:function(){var e=this.$refs.root;if(e){var t=e.getBoundingClientRect(),i=e.ownerDocument.defaultView,n=this.isHorizontal?t.left+i.pageXOffset:t.top+i.pageYOffset;this.virtual.updateParam("slotHeaderSize",n)}},reset:function(){this.virtual.destroy(),this.scrollToOffset(0),this.installVirtual()},installVirtual:function(){this.virtual=new T({slotHeaderSize:0,slotFooterSize:0,keeps:this.keeps,estimateSize:this.estimateSize,buffer:Math.round(this.keeps/3),uniqueIds:this.getUniqueIdFromDataSources()},this.onRangeChanged),this.range=this.virtual.getRange()},getUniqueIdFromDataSources:function(){var e=this;return this.dataSources.map((function(t){return t[e.dataKey]}))},onItemResized:function(e,t){this.virtual.saveSize(e,t),this.$emit("resized",e,t)},onSlotResized:function(e,t,i){e===M.HEADER?this.virtual.updateParam("slotHeaderSize",t):e===M.FOOTER&&this.virtual.updateParam("slotFooterSize",t),i&&this.virtual.handleSlotSizeChange()},onRangeChanged:function(e){this.range=e},onScroll:function(e){var t=this.getOffset(),i=this.getClientSize(),n=this.getScrollSize();t<0||t+i>n||!n||(this.virtual.handleScroll(t),this.emitEvent(t,i,n,e))},emitEvent:function(e,t,i,n){this.$emit("scroll",n,this.virtual.getRange()),this.virtual.isFront()&&this.dataSources.length&&e-this.topThreshold<=0?this.$emit("totop"):this.virtual.isBehind()&&e+t+this.bottomThreshold>=i&&this.$emit("tobottom")},getRenderSlots:function(e){for(var t=[],i=this.range,n=i.start,a=i.end,s=this.dataSources,r=this.dataKey,o=this.itemClass,l=this.itemTag,c=this.itemStyle,u=this.isHorizontal,h=this.extraProps,d=this.dataComponent,f=n;f<=a;f++){var p=s[f];p?Object.prototype.hasOwnProperty.call(p,r)?t.push(e(F,{props:{index:f,tag:l,event:P.ITEM,horizontal:u,uniqueKey:p[r],source:p,extraProps:h,component:d},style:c,class:"".concat(o).concat(this.itemClassAdd?" "+this.itemClassAdd(f):"")})):console.warn("Cannot get the data-key '".concat(r,"' from data-sources.")):console.warn("Cannot get the index '".concat(f,"' from data-sources."))}return t}},render:function(e){var t=this.$slots,i=t.header,n=t.footer,a=this.range,s=a.padFront,r=a.padBehind,o=this.isHorizontal,l=this.pageMode,c=this.rootTag,u=this.wrapTag,h=this.wrapClass,d=this.wrapStyle,f=this.headerTag,p=this.headerClass,m=this.headerStyle,g=this.footerTag,v=this.footerClass,y=this.footerStyle,z={padding:o?"0px ".concat(r,"px 0px ").concat(s,"px"):"".concat(s,"px 0px ").concat(r,"px")},b=d?Object.assign({},d,z):z;return e(c,{ref:"root",on:{"&scroll":!l&&this.onScroll}},[i?e(R,{class:p,style:m,props:{tag:f,event:P.SLOT,uniqueKey:M.HEADER}},i):null,e(u,{class:h,attrs:{role:"group"},style:b},this.getRenderSlots(e)),n?e(R,{class:v,style:y,props:{tag:g,event:P.SLOT,uniqueKey:M.FOOTER}},n):null,e("div",{ref:"shepherd",style:{width:o?"0px":"100%",height:o?"100%":"0px"}})])}}),D=j,H=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"introduction",domProps:{innerHTML:e._s(e.description)}})},B=[],$={name:"introduction",props:{description:{type:String}}},N=$,q=(i("de3a"),Object(r["a"])(N,H,B,!1,null,"0c507b69",null)),V=q.exports,A=function(){var e=this,t=e.$createElement,i=e._self._c||t;return e.code?i("pre",{class:e.type,domProps:{innerHTML:e._s(e.encode(e.code))}}):e._e()},L=[],K=(i("ac1f"),i("5319"),{name:"code-high-light",props:{type:{type:String,required:!0},code:{type:String,required:!0}},mounted:function(){"undefined"!==typeof window.hljs&&this.$el.textContent&&window.hljs.highlightBlock(this.$el)},methods:{encode:function(e){return"html"===this.type&&(e=e.replace(/</g,"&lt;"),e=e.replace(/>/g,"&gt;")),e=e.replace(/\s/,""),e}}}),W=K,U=(i("595a"),Object(r["a"])(W,A,L,!1,null,"99fd125a",null)),X=U.exports,G=function(){var e=this,t=e.$createElement,i=e._self._c||t;return e.isMobile?e._e():i("a",{staticClass:"github-corner",attrs:{href:e.url,"aria-label":"View source on GitHub"}},[e._v(" GITHUB ")])},Y=[],J=i("835c"),Q=i("3f05"),Z={name:"github-corner",data:function(){return{url:"",size:80,isMobile:J["a"]}},mounted:function(){this.url=Object(Q["a"])()}},ee=Z,te=(i("8388"),Object(r["a"])(ee,G,Y,!1,null,"4799d028",null)),ie=te.exports,ne=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"tab"},[i("div",{staticClass:"tab-item view",class:{active:e.isView},on:{click:e.eventClickView}},[e._v("VIEW")]),i("div",{staticClass:"tab-item code",class:{active:!e.isView},on:{click:e.eventClickCode}},[e._v("CODE")]),i("a",{directives:[{name:"show",rawName:"v-show",value:!e.isView,expression:"!isView"}],staticClass:"complete-code-url",attrs:{target:"_blank",href:e.completeCodeUrl}},[e._v("COMPLETE CODE")])])},ae=[],se=i("b95e"),re={name:"tab",data:function(){return{completeCodeUrl:"",active:se["a"]}},computed:{isView:function(){return this.active===se["b"].VIEW}},mounted:function(){this.completeCodeUrl=Object(Q["a"])()},methods:{eventClickView:function(){this.active=se["b"].VIEW,this.emitEvent()},eventClickCode:function(){this.active=se["b"].CODE,this.emitEvent()},emitEvent:function(){this.$emit("tab-change",this.active)}}},oe=re,le=(i("2345"),Object(r["a"])(oe,ne,ae,!1,null,"13711752",null)),ce=le.exports;n["a"].component("virtual-list",D),n["a"].component(V.name,V),n["a"].component(X.name,X),n["a"].component(ie.name,ie),n["a"].component(ce.name,ce),n["a"].component("github-button",b["a"]),n["a"].config.devtools=!1,n["a"].config.productionTip=!1,new n["a"]({router:z,render:function(e){return e(c)}}).$mount("#app")},"595a":function(e,t,i){"use strict";var n=i("a5ff"),a=i.n(n);a.a},"67ef":function(e,t,i){},"7c55":function(e,t,i){"use strict";var n=i("2395"),a=i.n(n);a.a},"835c":function(e,t,i){"use strict";i.d(t,"a",(function(){return r}));i("ac1f"),i("466d");var n=navigator.userAgent,a=!!n.match(/Android/i),s=!!n.match(/iPhone|iPad|iPod/i),r=a||s},8388:function(e,t,i){"use strict";var n=i("b6af"),a=i.n(n);a.a},a5ff:function(e,t,i){},b6af:function(e,t,i){},b95e:function(e,t,i){"use strict";i.d(t,"b",(function(){return n})),i.d(t,"a",(function(){return a}));var n={VIEW:1,CODE:2},a=n.VIEW},de3a:function(e,t,i){"use strict";var n=i("2f31"),a=i.n(n);a.a}});
\ No newline at end of file
diff --git a/example/src/App.vue b/example/src/App.vue
index af7e1c3..0acf040 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -105,6 +105,7 @@ h1, h2, h3, h4, h5, h6 {
 .example-content {
   margin-top: 1em;
   background-color: #fff;
+  position: relative;
 }
 
 .scroll-touch {