scrollIntoView innacurate when idle

Question

Background

I am working on creating a single page website. It is almost complete and works amazingly! But there was 1 bug I could never manage to fix. When a supported anchor (links to a section) is clicked, rather then reloading the page, I would scroll to that section.

If the section is already loaded, it scrolls to it normally.

If it is not loaded, the request is queued for later. This is when the bug occurs. Rather then scrolling to Home, it scrolls just below it. If Portfolio is requested, it scrolls halfway up.

Steps to reproduce

Assuming I continue to work on this design, it can be viewed on my website: https://cjloewen.ca/.

1. Refresh the page. For testing purposes, sections won't load for 10 seconds.
2. While loading, any section can be requested. If that section is not currently loaded, a loading icon will display next to the link.
3. Once a requested section is loaded, loading will halt, it will wait for the user to stop scrolling then it will scroll to the requested section using elem.scrollIntoView({ behavior: 'smooth', block: 'start' });.

What I tried

• I have verified it is scrolling to the correct element and no other elements afterword.
• I switched to using an MutationObserver to know when the element is added to the DOM.
• I tried waiting for requestAnimationFrame before scrolling.
• I tried adding a short 500 millisecond timeout before scrolling.
• I have tried adding a 60 second timeout before scrolling, making sure I am not interacting with the page at any point.
• I tried scrolling using scrollTo instead of scrollIntoView (same behavior).
• I tried it in Edge (slightly different behavior but same problem).

Source code

All relevant source code can be found at https://cjloewen.ca/js/main.js (source map included).

• I insert sections on line 156.

previous.before(next)

previous.after(next)

• I lock loading on line 80.

// Set the lock.
mainContentLockWaiting = [];
mainContentLock = true;
// ...
// Reset the lock.
mainContentLock = false;
for (let insert of mainContentLockWaiting)
    insert();

• I wait for the user to stop scrolling on line 84.

let isScrolling = null;
let scrollListener = function() {
    clearTimeout(isScrolling);
    isScrolling = setTimeout(function() {
        mainContent.removeEventListener('scroll', scrollListener);
        resolve();
    }, 250);
}
mainContent.addEventListener('scroll', scrollListener, false);

• scrollIntoView is called on line 73.

elem.scrollIntoView({ behavior: 'smooth', block: 'start' });

Any help is greatly appreciated!