-
-
Notifications
You must be signed in to change notification settings - Fork 955
Open
Description
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
- 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.
Metadata
Metadata
Assignees
Labels
No labels