Add offset prop to support assign scroll offset.

Author: tangbc

README.md

@@ -10,9 +10,6 @@
 <a href="http://packagequality.com/#?package=vue-virtual-scroll-list">
     <img src="http://npm.packagequality.com/shield/vue-virtual-scroll-list.svg">
 </a>
-<a href="https://github.com/tangbc/vue-virtual-scroll-list/blob/master/LICENSE">
-    <img src="https://img.shields.io/github/license/tangbc/vue-virtual-scroll-list.svg" alt="MIT License"/>
-</a>
 
 
 ## vue-virtual-scroll-list
@@ -25,18 +22,18 @@
 
 * Support fixed height and variable height.
 
-* Support set the initial scroll index or change any.
+* Support set the initial scroll index or offset.
 
-* Event scrolling, reach top and bottom can be detected.
+* Event scroll, reach top and bottom can be detected.
 
 
 ## Live demos
 
 * [vue-virtual-scroll-list with 100,000 finite data](https://tangbc.github.io/vue-virtual-scroll-list/examples/finite/).
 
-* [vue-virtual-scroll-list with requesting infinite data](https://tangbc.github.io/vue-virtual-scroll-list/examples/infinite/).
+* [vue-virtual-scroll-list with request infinite data](https://tangbc.github.io/vue-virtual-scroll-list/examples/infinite/).
 
-* [vue-virtual-scroll-list with variable height](https://tangbc.github.io/vue-virtual-scroll-list/examples/variable/).
+* [vue-virtual-scroll-list with variable height mode](https://tangbc.github.io/vue-virtual-scroll-list/examples/variable/).
 
 
 ## How it works
@@ -118,15 +115,16 @@ new Vue({
 :--- | :--- | :--- | :--- |
 | size | Number | ✓ | Each list item height, in variable height mode, this prop just use to calculate the virtual-list outside container viewport height. |
 | remain | Number | ✓ | How many items should be shown in virtual-list viewport, so `size` and `remain` determine the outside container viewport height (size × remian). |
-| start | Number | * | Default value is `0`, the initial scroll start index. It must be integer and in the range of list index, if out of range it will be turned to `0` or the last one.  |
+| start | Number | * | Default value is `0`, the initial scroll start index. It must be integer and in the range of list index, if invalid there will be effected as `0` or the last one.  |
+| offset | Number | * | Default value is `0`, the initial scroll offset. If both `start` and `offset` are assigned at initialization, `start` is preferred. |
 | bench | Number | * | Default value is equal to `remain`, unreached items count, not show in virtual-list viewport but exist in real DOM, the larger the bench, the higher the scroll performance will achieved.  |
 | debounce | Number | * | **It's disabled by default**, milliseconds of using `debounce` function to ensure scroll event doesn't fire so often that it bricks browser performance. |
 | rtag | String | * | Default value is `div`, the virtual-list root element tag name, in all cases it's style is set to `display: block;` |
 | wtag | String | * | Default value is `div`, the virtual-list item wrapper element tag name, in all cases it's style is set to `display: block;` |
 | wclass | String | * | Default value is an empty string, the virtual-list item wrapper element class, if assign this prop, you better **not** to change it's [CSS box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model). |
 | totop | Function | * | Called when virtual-list is scrolled to top, no param. |
 | tobottom | Function | * | Called when virtual-list is scrolled to bottom, no param. |
-| onscroll | Function | * | Called when virtual-list is scrolling, param: `(e, { offset, offsetAll, start, end })`. |
+| onscroll | Function | * | Called when virtual-list is scrolling, with param: [`(event, data)`](https://github.com/tangbc/vue-virtual-scroll-list/releases/tag/v1.1.7). |
 | variable | Function or Boolean | * | For using virtual-list with variable height mode. If assign `Function`, this prop is a variable height getter function which is called with param: `(index)` when each item is ready to be calculated. If assign `Boolean`, virtual-list will get each item variable height by it's inline style height automatic. |
 
 ### About variable height

index.js

@@ -42,6 +42,7 @@
             wtag: { type: String, default: 'div' },
             wclass: { type: String, default: '' },
             start: { type: Number, default: 0 },
+            offset: { type: Number, default: 0 },
             variable: [Function, Boolean],
             bench: Number,
             debounce: Number,
@@ -80,6 +81,9 @@
             },
             start: function () {
                 this.alter = 'start'
+            },
+            offset: function () {
+                this.alter = 'offset'
             }
         },
 
@@ -198,8 +202,8 @@
                     var slot = this.$slots.default[index]
                     var style = slot && slot.data && slot.data.style
                     if (style && style.height) {
-                        var mc = style.height.match(/^(.*)px$/)
-                        return (mc && +mc[1]) || 0
+                        var shm = style.height.match(/^(.*)px$/)
+                        return (shm && +shm[1]) || 0
                     }
                 }
                 return 0
@@ -317,6 +321,8 @@
             if (this.start) {
                 var start = this.getZone(this.start).start
                 this.setScrollTop(this.variable ? this.getVarOffset(start) : start * this.size)
+            } else if (this.offset) {
+                this.setScrollTop(this.offset)
             }
         },
 
@@ -325,20 +331,20 @@
             var delta = this.delta
             delta.keeps = this.remain + (this.bench || this.remain)
 
-            var alterStart = this.alter === 'start'
-            var calcStart = alterStart ? this.start : delta.start
-            var zone = this.getZone(calcStart)
+            var calcstart = this.alter === 'start' ? this.start : delta.start
+            var zone = this.getZone(calcstart)
 
-            // if start or size change, update scroll position.
-            if (alterStart || this.alter === 'size') {
-                this.$nextTick(this.setScrollTop.bind(this, this.variable
-                    ? this.getVarOffset(zone.isLast ? delta.total : zone.start)
-                    : zone.isLast ? delta.total * this.size : zone.start * this.size)
+            // if start, size or offset change, update scroll position.
+            if (~['start', 'size', 'offset'].indexOf(this.alter)) {
+                this.$nextTick(this.setScrollTop.bind(this, this.alter === 'offset'
+                    ? this.offset : this.variable
+                        ? this.getVarOffset(zone.isLast ? delta.total : zone.start)
+                        : zone.isLast ? delta.total * this.size : zone.start * this.size)
                 )
             }
 
             // if points out difference, force update once again.
-            if (calcStart !== zone.start || delta.end !== zone.end || this.alter) {
+            if (calcstart !== zone.start || delta.end !== zone.end || this.alter) {
                 this.alter = ''
                 delta.end = zone.end
                 delta.start = zone.start

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-virtual-scroll-list",
-  "version": "1.1.9",
+  "version": "1.2.0",
   "description": "A vue (2.x) component that support big data and infinite loading by using virtual scroll list.",
   "main": "index.js",
   "files": [