petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.26k stars 301 forks source link

[BUG] #930

Closed hurram-dev closed 1 year ago

hurram-dev commented 1 year ago

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 image

With extra large padding above: image

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;

          const mapKey = item ? item?.custom_uuid || item.id : tempMessage.id;

          const { isSameFromUserWithPrev, isSameFromUserWithNext } =
              checkMsgAuthor({
                  currentMsgAuthorId: item.from_user.id,
                  prevMsgAuthorId: messagesList[idx - 1]?.from_user.id,
                  nextMsgAuthorId: messagesList[idx + 1]?.from_user.id,
                  prevMsgType: messagesList[idx - 1]?.type,
                  nextMsgType: messagesList[idx + 1]?.type
              });
        return (
            <div key={mapKey}>
                {isFirstUnread && messagesList?.length > 1 ? (
                    <div className="my-2 mx-0 w-full bg-kgrey-inputBg text-center text-kdark-424242 dark:bg-kdark-dark333 dark:text-white">
                        Unread messages
                    </div>
                ) : null}
                <VizSensor
                    offset={{ bottom: 50 }}
                    scrollDelay={100}
                    onChange={(isVisible) => {
                        messageVisibleHandler(isVisible, item);
                    }}>
                    <ChatMessage
                        key={mapKey}
                        message={item || tempMessage}
                        isSameFromUserWithPrev={isSameFromUserWithPrev}
                        isSameFromUserWithNext={isSameFromUserWithNext}
                    />
                </VizSensor>
            </div>
        );
        }}
        />

`

Desktop (please complete the following information):

Additional context Add any other context about the problem here.