pageMode RecycleScroller compensate for pixels above virtual items inside scrolling parent

[joeldrake]

Describe the bug

When using RecycleScroller with pageMode, and the RecycleScroller is inside a scrolling parent together with other stuff above, the virtual items is not recycled at the correct time when scrolling.

Reproduction

Example:

<scroll-parent>
  <other-stuff>
  </other stuff>
    
  <RecycleScroller page-mode>
  </RecycleScroller>
</scroll-parent>

I have solved this with a local fork of RecycleScroller where I can send in a prop (pageModePixelsAboveItems) with a pixel value that I use to compensate for the space above the virtual items. This is done in the getScroll() function inside the if(this.pageMode) clause. Also, I take the scrolling parent in to account here.

Like so:

props: {
    ...
    pageModePixelsAboveItems: {
        type: Number,
        default: 0,
    },
}

getScroll() {
...
    if (this.pageMode) {
    ...
        const parent = getScrollParent(this.$el);
        const bounds = parent.getBoundingClientRect();
        let start = isVertical ? parent.scrollTop - this.pageModePixelsAboveItems : parent.scrollLeft;
        let size = isVertical ? bounds.height : bounds.width;
    }

System Info

Using vue and local RecycleScroller forked from v2.0.0-beta.8

Used Package Manager

pnpm

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.