Problems with scrolling header into view after TableOfContents click

[disberd]

I am facing issues with navigating through long documents by clicking on the headers of the new TableOfContents.

The issue is present for me when using edge/chromium on windows as browser and connecting to a Pluto server with windows/linux (I tested both locally on windows and still with the browser on Windows but connecting to a remote linux server hosting Pluto). Edit: I tested on firefox and the problem doesn't appear there, I also tested specific calls to element.scrollIntoView and it seems that smooth scrolling has issues in chromium even outside of the TableOfContents

The problem is that when opening a page and trying to click onto a header in the TableOfContents, the scrolling into view seems to interrupt before reaching the element. For elements quite far in the document, I need to click multiple times before finally reaching the element.

Strangely enough, once an element has been reached, scrolling back into it after going back to the top of the document seems to work fine. If I refresh the page though, the problem presents itself again.

I tested this behavior with the notebook defining the TableOfContents below:

https://user-images.githubusercontent.com/12846528/202744555-74525efe-b818-405c-ba49-daebc314c93c.mp4

[holomorphism]

I have also confirmed this problem in several notebooks. My environment is as follows.

• Linux (Xubuntu 22.04)
• Chrome 108.0.5359.124

Just a confirmation of what @disberd already pointed out, but turning off smooth scrolling eliminated this problem in my environment as well. What I did was to change lines 184-187 in TableOfContents.jl as follows.

https://github.com/JuliaPluto/PlutoUI.jl/blob/4f9a89c1e1db300bbe0415d48e9e8e5d9d041b6c/src/TableOfContents.jl#L181-L188

        h.scrollIntoView({
            behavior: 'auto',
            block: 'start'
        })

Alternatively, the following changes have reduced the scrolling errors, although the problem remains.

        window.scrollTo({
            behavior: 'smooth',
            top: window.pageYOffset + h.getBoundingClientRect().top - 20
        })

(The -20 at the end is the top offset. I actually turn off smooth scrolling in addition to the latter code)

[disberd]

In my extended ToC in my private package here I resorted to use the SmoothScroll library as scrolling replacement for consistent scrolling even in chrome