Wheel events

dist/index.js

@@ -7,10 +7,38 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('vue')) :
   typeof define === 'function' && define.amd ? define(['vue'], factory) :
-  (global = global || self, global.VirtualList = factory(global.Vue));
-}(this, (function (Vue) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.VirtualList = factory(global.Vue));
+})(this, (function (Vue) { 'use strict';
 
-  Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue;
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+  var Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue);
+
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      enumerableOnly && (symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      })), keys.push.apply(keys, symbols);
+    }
+
+    return keys;
+  }
+
+  function _objectSpread2(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = null != arguments[i] ? arguments[i] : {};
+      i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+
+    return target;
+  }
 
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
@@ -31,6 +59,9 @@
   function _createClass(Constructor, protoProps, staticProps) {
     if (protoProps) _defineProperties(Constructor.prototype, protoProps);
     if (staticProps) _defineProperties(Constructor, staticProps);
+    Object.defineProperty(Constructor, "prototype", {
+      writable: false
+    });
     return Constructor;
   }
 
@@ -49,40 +80,6 @@
     return obj;
   }
 
-  function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-
-    if (Object.getOwnPropertySymbols) {
-      var symbols = Object.getOwnPropertySymbols(object);
-      if (enumerableOnly) symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-      keys.push.apply(keys, symbols);
-    }
-
-    return keys;
-  }
-
-  function _objectSpread2(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
-
-      if (i % 2) {
-        ownKeys(Object(source), true).forEach(function (key) {
-          _defineProperty(target, key, source[key]);
-        });
-      } else if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-      } else {
-        ownKeys(Object(source)).forEach(function (key) {
-          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-      }
-    }
-
-    return target;
-  }
-
   function _toConsumableArray(arr) {
     return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
   }
@@ -92,15 +89,15 @@
   }
 
   function _iterableToArray(iter) {
-    if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
   }
 
   function _unsupportedIterableToArray(o, minLen) {
     if (!o) return;
     if (typeof o === "string") return _arrayLikeToArray(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Map" || n === "Set") return Array.from(o);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
   }
 
@@ -648,7 +645,7 @@
     }
   }; // wrapping for item
 
-  var Item = Vue.component('virtual-list-item', {
+  var Item = Vue__default["default"].component('virtual-list-item', {
     mixins: [Wrapper],
     props: ItemProps,
     render: function render(h) {
@@ -663,7 +660,7 @@
           uniqueKey = this.uniqueKey,
           slotComponent = this.slotComponent;
 
-      var props = _objectSpread2({}, extraProps, {
+      var props = _objectSpread2(_objectSpread2({}, extraProps), {}, {
         source: source,
         index: index
       });
@@ -684,7 +681,7 @@
     }
   }); // wrapping for slot
 
-  var Slot = Vue.component('virtual-list-slot', {
+  var Slot = Vue__default["default"].component('virtual-list-slot', {
     mixins: [Wrapper],
     props: SlotProps,
     render: function render(h) {
@@ -711,7 +708,7 @@
     // string value also use for aria role attribute
     FOOTER: 'tfoot'
   };
-  var VirtualList = Vue.component('virtual-list', {
+  var VirtualList = Vue__default["default"].component('virtual-list', {
     props: VirtualProps,
     data: function data() {
       return {
@@ -735,6 +732,7 @@
       }
     },
     created: function created() {
+      this.timer = null;
       this.isHorizontal = this.direction === 'horizontal';
       this.directionKey = this.isHorizontal ? 'scrollLeft' : 'scrollTop';
       this.installVirtual(); // listen item size change
@@ -745,9 +743,20 @@
         this.$on(EVENT_TYPE.SLOT, this.onSlotResized);
       }
     },
-    // set back offset when awake from keep-alive
     activated: function activated() {
+      // set back offset when awake from keep-alive
       this.scrollToOffset(this.virtual.offset);
+
+      if (this.pageMode) {
+        document.addEventListener('scroll', this.onScroll, {
+          passive: false
+        });
+      }
+    },
+    deactivated: function deactivated() {
+      if (this.pageMode) {
+        document.removeEventListener('scroll', this.onScroll);
+      }
     },
     mounted: function mounted() {
       // set position
@@ -815,13 +824,20 @@
       // set current scroll position to a expectant offset
       scrollToOffset: function scrollToOffset(offset) {
         if (this.pageMode) {
-          document.body[this.directionKey] = offset;
-          document.documentElement[this.directionKey] = offset;
+          window.scrollTo({
+            top: this.isHorizontal ? 0 : offset,
+            left: this.isHorizontal ? offset : 0,
+            behavior: 'smooth'
+          });
         } else {
           var root = this.$refs.root;
 
           if (root) {
-            root[this.directionKey] = offset;
+            root.scrollTo({
+              top: this.isHorizontal ? 0 : offset,
+              left: this.isHorizontal ? offset : 0,
+              behavior: 'smooth'
+            });
           }
         }
       },
@@ -925,6 +941,9 @@
         this.virtual.handleScroll(offset);
         this.emitEvent(offset, clientSize, scrollSize, evt);
       },
+      onWheel: function onWheel(evt) {
+        this.$emit('wheel', evt);
+      },
       // emit event in special position
       emitEvent: function emitEvent(offset, clientSize, scrollSize, evt) {
         this.$emit('scroll', evt, this.virtual.getRange());
@@ -1016,7 +1035,8 @@
       return h(rootTag, {
         ref: 'root',
         on: {
-          '&scroll': !pageMode && this.onScroll
+          '&scroll': !pageMode && this.onScroll,
+          '&wheel': !pageMode && this.onWheel
         }
       }, [// header slot
       header ? h(Slot, {
@@ -1056,4 +1076,4 @@
 
   return VirtualList;
 
-})));
+}));

src/index.js

@@ -46,6 +46,7 @@ const VirtualList = Vue.component('virtual-list', {
   },
 
   created () {
+    this.timer = null
     this.isHorizontal = this.direction === 'horizontal'
     this.directionKey = this.isHorizontal ? 'scrollLeft' : 'scrollTop'
 
@@ -63,15 +64,15 @@ const VirtualList = Vue.component('virtual-list', {
   activated () {
     // set back offset when awake from keep-alive
     this.scrollToOffset(this.virtual.offset)
-    
+
     if (this.pageMode) {
       document.addEventListener('scroll', this.onScroll, {
-        passive: false,
+        passive: false
       })
     }
   },
-  
-  deactivated() {
+
+  deactivated () {
     if (this.pageMode) {
       document.removeEventListener('scroll', this.onScroll)
     }
@@ -148,12 +149,19 @@ const VirtualList = Vue.component('virtual-list', {
     // set current scroll position to a expectant offset
     scrollToOffset (offset) {
       if (this.pageMode) {
-        document.body[this.directionKey] = offset
-        document.documentElement[this.directionKey] = offset
+        window.scrollTo({
+          top: this.isHorizontal ? 0 : offset,
+          left: this.isHorizontal ? offset : 0,
+          behavior: 'smooth'
+        })
       } else {
         const { root } = this.$refs
         if (root) {
-          root[this.directionKey] = offset
+          root.scrollTo({
+            top: this.isHorizontal ? 0 : offset,
+            left: this.isHorizontal ? offset : 0,
+            behavior: 'smooth'
+          })
         }
       }
     },
@@ -265,6 +273,10 @@ const VirtualList = Vue.component('virtual-list', {
       this.emitEvent(offset, clientSize, scrollSize, evt)
     },
 
+    onWheel (evt) {
+      this.$emit('wheel', evt)
+    },
+
     // emit event in special position
     emitEvent (offset, clientSize, scrollSize, evt) {
       this.$emit('scroll', evt, this.virtual.getRange())
@@ -328,7 +340,8 @@ const VirtualList = Vue.component('virtual-list', {
     return h(rootTag, {
       ref: 'root',
       on: {
-        '&scroll': !pageMode && this.onScroll
+        '&scroll': !pageMode && this.onScroll,
+        '&wheel': !pageMode && this.onWheel
       }
     }, [
       // header slot