Skip to content

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

@bigiCrab

Description

@bigiCrab

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions