[BUG] Scroll To Bottom Doesn't work for me, even on the demo documentation website

[ljs19923]

https://virtuoso.dev/scroll-to-index/

I'm not able to see the last block "1000" when I scroll to 1000 with or without animation, to the end So impossible to scroll to the bottom

Thanks a lot

[ljs19923]

My bad. This works

virtuoso.current.scrollToIndex({ index: messages.length, align: "end", behavior: animated ? "smooth" : "auto", });

[ljs19923]

In fact, sometimes it doesnt work totally.. some pixels are missing to go to the bottom :/

[petyosi]

This example needs some sizing love, but the feature I believe works well. There's a double scroller - one for the iframe and another one for the virtuoso list itself. Opening it in a sandbox works, unless I am missing something.

[decaf-dev]

@petyosi I am getting the same behavior in my app. The container is scrolled to 1 item before the last row. I am using v.4.3.8. I tried the sandbox link that you posted above and that has the same behavior as well. I am using a Chromium-based browser.

[decaf-dev]

I also tried using the popout window. If I am scrolled to the very top, when I click "scroll to 1000", it does not scroll to the very bottom of the 1000th cell. Some is still cut off.

[petyosi]

Can you record a video? Ensure that the problem is not due to the double scroller being present.

[decaf-dev]

Yes, there is a double scroller. I didn't notice that. So the example should work then, assuming that the double scroller wasn't present?

In appears in my app, I am having the issue when there is no double scroller. Here is a video.

The New Row button will add a new row. This is the hook I'm using. I have checked the table for margin values and I have none.

    const tableRef = React.useRef<VirtuosoHandle>(null);

    const didRowsChange = useCompare(bodyRows.length);

    /**
     * Scrolls to the bottom of the page when the "New Row" button is pressed
     */
    React.useEffect(() => {
        if (didRowsChange) {
            tableRef.current?.scrollToIndex({
                index: bodyRows.length - 1,
                align: "end",
            });
        }
    }, [didRowsChange, bodyRows.length]);

My table has a fixed header, a fixed footer, and border-collapse: separate. I can create a sandbox if that would be helpful.

https://github.com/petyosi/react-virtuoso/assets/40307803/d9b25287-c062-40d3-aa5b-fc5a7e1935f6

[decaf-dev]

Okay. Here is a reproduction of the issue. https://codesandbox.io/s/react-virtuoso-scroll-bug-mk33xi

It seems to have something to do with the padding and border value of td

A padding of 0 will work but a padding of unset will reproduce the bug

A padding of 0 and a border of 1px black solid will also cause the bug

[petyosi]

@trey-wallis the problem you experience is not related to the styling, but to the timing of the scroll to index call. It happens before the internal row count / size calculations and scrolls with one row less.

The list and the table expose a property called followOutput that does what I believe you're trying to implement. See this version of your sandbox.

If you experience further problems, I may suggest that you open a separate issue, following the template. Also, review the examples in the docs website, as some of the more complex scenarios need a specific approach to work as expected.