Please consider the parent element style to be relative when page mode is applied.

[baco16g]

Describe

• In page mode, offsetTop is set as slotHeaderSize.
• However, there is a problem if the parent element style is set to position: relative.
  • topPos is the number of pixels from the top of the closest relatively positioned parent element.

vue-virtual-scroll-list/src/index.js

Lines 71 to 83 in f4d9be6

	// in page mode we bind scroll event to document
	if (this.pageMode) {
	document.addEventListener('scroll', this.onScroll, {
	passive: false
	})
	// taking root offsetTop or offsetLeft as slot header size
	const { root } = this.$refs
	if (root) {
	this.virtual.updateParam('slotHeaderSize', root[this.isHorizontal ? 'offsetLeft' : 'offsetTop'])
	}
	}
	},

To Reproduce

1. Apply page mode.
2. Wrap the vue-virtual-scroll-list with an element.
3. Set margin-top: 300px; and position: relative; to the element.
4. When scrolling, there is an error in the range switching timing.

Reproduce demo

https://codesandbox.io/s/live-demo-virtual-list-ickof

Other

• Version: 2.1.9
• Browser: chrome, safari

[tangbc]

OK, I will fix it soon.

[tangbc]

Fixed and published in v2.2.0

Here is the latest version forking demo: https://codesandbox.io/s/live-demo-virtual-list-5zmj4

Also, in page mode if offsetTop change (we cannot detect an element position change in browser), you shoud call public mehod updatePageModeFront () to update manually.

[baco16g]

Thanks for implementation!