bugfix: scrollToItem works with pageMode

Author: dam1r89

docs-src/src/components/RecycleScrollerDemo.vue

@@ -42,6 +42,15 @@
           max="500000"
         > buffer
       </span>
+      <span>
+        <button @mousedown="$refs.scroller.scrollToItem(scrollTo)">Scroll To: </button>
+        <input
+          v-model.number="scrollTo"
+          type="number"
+          min="0"
+          :max="list.length - 1"
+        >
+      </span>
       <span>
         <button @mousedown="renderScroller = !renderScroller">Toggle render</button>
         <button @mousedown="showScroller = !showScroller">Toggle visibility</button>
@@ -113,6 +122,7 @@ export default {
     enableLetters: true,
     pageMode: false,
     pageModeFullPage: true,
+    scrollTo: 100,
   }),
 
   computed: {

src/components/RecycleScroller.vue

@@ -573,11 +573,23 @@ export default {
     },
 
     scrollToPosition (position) {
-      if (this.direction === 'vertical') {
-        this.$el.scrollTop = position
-      } else {
-        this.$el.scrollLeft = position
+      const direction = this.direction === 'vertical'
+        ? { scroll: 'scrollTop', start: 'top', size: 'height' }
+        : { scroll: 'scrollLeft', start: 'left', size: 'width' }
+
+      if (this.pageMode) {
+        const viewportEl = ScrollParent(this.$el)
+        // HTML doesn't overflow like other elements
+        const scrollTop = viewportEl.tagName === 'HTML' ? 0 : viewportEl[direction.scroll]
+        const viewport = viewportEl.getBoundingClientRect()
+
+        const scroller = this.$el.getBoundingClientRect()
+        const beginningOfViewport = scroller[direction.start] - viewport[direction.start]
+        viewportEl[direction.scroll] = position + scrollTop + beginningOfViewport
+        return
       }
+
+      this.$el[direction.scroll] = position
     },
 
     itemsLimitError () {