Use vue-observe-visibility

README.md

@@ -16,6 +16,9 @@ Smooth scroll with any amount of data ([demo](https://akryum.github.io/vue-virtu
 ```
 npm install --save vue-virtual-scroller
 ```
+
+**⚠️ `vue-virtual-scroller` now uses [vue-observe-visibility](https://github.com/Akryum/vue-observe-visibility) to automatically refresh itself when shown to prevent display glitches. This means you need to include the polyfills needed by `vue-observe-visibility` for this to work.**
+
 ## Default import
 
 Install all the components:

dist/vue-virtual-scroller.css

@@ -24,3 +24,7 @@
   display: block;
   overflow: hidden;
 }
+
+.test h1[data-v-5ee0142a] {
+  color: #40b883;
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-virtual-scroller",
   "description": "Smooth scrolling for any amount of data",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "author": {
     "name": "Guillaume Chau",
     "email": "guillaume.b.chau@gmail.com"
@@ -51,6 +51,7 @@
     "webpack-merge": "^1.1.2"
   },
   "dependencies": {
+    "vue-observe-visibility": "^0.1.1",
     "vue-resize": "^0.1.0"
   }
 }

src/components/VirtualScroller.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="mainTag" class="virtual-scroller" @scroll="updateVisibleItems">
+  <component :is="mainTag" class="virtual-scroller" @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">
@@ -16,6 +16,7 @@
 
 <script>
 import { ResizeObserver } from 'vue-resize'
+import { ObserveVisibility } from 'vue-observe-visibility'
 
 export default {
   name: 'virtual-scroller',
@@ -24,6 +25,10 @@ export default {
     ResizeObserver,
   },
 
+  directives: {
+    ObserveVisibility,
+  },
+
   props: {
     items: {
       type: Array,
@@ -101,6 +106,12 @@ export default {
     scrollToItem (index) {
       this.$el.scrollTop = index * this.itemHeight
     },
+
+    handleVisibilityChange (isVisible) {
+      if (isVisible) {
+        this.updateVisibleItems()
+      }
+    },
   },
 
   mounted () {