Describe the bug
I use useWindowScroll option and this is causing the problem that gives extra large padding to top of the list. So, it seems only it happens when i use useWindowScroll and customScrollParent options.
Screenshots
With extra large padding above:
This is a code that i am implementing:
`<div className={clsx(isConfirmationRequired && 'pb-12', 'h-full')} id="">
<Virtuoso
useWindowScroll
data={messagesList}
totalCount={meta?.count}
firstItemIndex={calculatedFirstItemIndex}
followOutput="auto"
endReached={(index) => {
handlePageLoading(true, 'previous', entityId);
}}
startReached={() => {
handlePageLoading(true, 'next', entityId);
}}
itemContent={(idx, item) => {
if (
Number(query?.lastReadMessage) === item?.id &&
hasUnreadCached &&
!searchedMessageId
) {
firstUnread.current = messagesList[idx + 1]?.id;
}
const isFirstUnread =
firstUnread.current && item.id && firstUnread.current === item.id;
Describe the bug I use
useWindowScroll
option and this is causing the problem that gives extra large padding to top of the list. So, it seems only it happens when i useuseWindowScroll
andcustomScrollParent
options.Screenshots
With extra large padding above:
This is a code that i am implementing: `<div className={clsx(isConfirmationRequired && 'pb-12', 'h-full')} id=""> <Virtuoso useWindowScroll data={messagesList} totalCount={meta?.count} firstItemIndex={calculatedFirstItemIndex} followOutput="auto" endReached={(index) => { handlePageLoading(true, 'previous', entityId); }} startReached={() => { handlePageLoading(true, 'next', entityId); }} itemContent={(idx, item) => { if ( Number(query?.lastReadMessage) === item?.id && hasUnreadCached && !searchedMessageId ) { firstUnread.current = messagesList[idx + 1]?.id; } const isFirstUnread = firstUnread.current && item.id && firstUnread.current === item.id;
Desktop (please complete the following information):
Additional context Add any other context about the problem here.