vue-virtual-scroller icon indicating copy to clipboard operation
vue-virtual-scroller copied to clipboard

RecycleScroller sometime is not render new item, if itemSize bigger then scrollerWindow

Open bigiCrab opened this issue 6 months ago • 0 comments
trafficstars

Describe the bug

if scroller window height = 300px and item height = 600px when scroller.scrollTop = 301~599px will not see the second item

I think it's cause by this line.

Reproduction

I coun't get StackBlitz to import, so I'll put reproduction here

<template>
	<div>
		<button @click="scrollTo(itemSize - 1)">scroll to 2nd page - 1px(no show)</button>
		<button @click="scrollTo(itemSize)">scroll to 2nd page(show)</button>
		<button @click="scrollTo(itemSize + 1)">scroll to 2nd page + 1px(show)</button>
		<button @click="reload">reload component</button>
		<RecycleScroller
			v-if="isShow"
			v-slot="slotProps"
			:style="{
				height: `${scrollerHeight}px`,
				backgroundColor: 'gray'
			}"
			:items="items"
			:itemSize="itemSize"
			ref="scroller">
			<div
				:style="{
					backgroundColor: 'red'
				}">
				slotProps:{{ slotProps }}
			</div>
		</RecycleScroller>
	</div>
</template>

<script setup>
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
import { RecycleScroller } from 'vue-virtual-scroller';
const isShow = ref(true);
const reload = async () => {
	isShow.value = false;
	await nextTick();
	isShow.value = true;
};

const scrollerHeight = 300;
const items = [{ id: 1 }, { id: 2 }, { id: 3 }];
const itemSize = 600;

const scroller = ref();
function scrollTo(offset){
	if(scroller.value)
	{ scroller.value.$el.scrollTop = offset; }
}
</script>

<style></style>

System Info

2.0.0-beta.8

Used Package Manager

npm

Validations

bigiCrab avatar May 19 '25 06:05 bigiCrab