fix: scrollToItem works with pageMode (#396)

Co-authored-by: Guillaume Chau <[email protected]>

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>
@@ -122,6 +131,7 @@ export default {
     enableLetters: true,
     pageMode: false,
     pageModeFullPage: true,
+    scrollTo: 100,
     updateParts: { viewStartIdx: 0, viewEndIdx: 0, visibleStartIdx: 0, visibleEndIdx: 0 },
     showMessageBeforeItems: true,
   }),

src/components/RecycleScroller.vue

@@ -625,11 +625,33 @@ export default {
     },
 
     scrollToPosition (position) {
-      if (this.direction === 'vertical') {
-        this.$el.scrollTop = position
+      const direction = this.direction === 'vertical'
+        ? { scroll: 'scrollTop', start: 'top' }
+        : { scroll: 'scrollLeft', start: 'left' }
+
+      let viewport
+      let scrollDirection
+      let scrollDistance
+
+      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 bounds = viewportEl.getBoundingClientRect()
+
+        const scroller = this.$el.getBoundingClientRect()
+        const scrollerPosition = scroller[direction.start] - bounds[direction.start]
+
+        viewport = viewportEl
+        scrollDirection = direction.scroll
+        scrollDistance = position + scrollTop + scrollerPosition
       } else {
-        this.$el.scrollLeft = position
+        viewport = this.$el
+        scrollDirection = direction.scroll
+        scrollDistance = position
       }
+
+      viewport[scrollDirection] = scrollDistance
     },
 
     itemsLimitError () {