Javascript 滚动到空闲时查看不准确 背景

我正在创建一个单页网站。它几乎是完整的，工作令人惊讶！但有一个bug我永远也无法修复。当一个支持的锚（链接到一个部分）被点击，而不是重新加载页面，我会滚动到该部分

如果该节已加载，它将正常滚动到该节。

如果未加载该请求，则该请求将在以后排队等待。这就是错误发生的时候。 它不会滚动到主页，而是在其下方滚动。如果请求公文包，它会向上滚动到一半

复制步骤 假设我继续从事此设计，可以在我的网站上查看：

刷新页面。出于测试目的，节在10秒内不会加载

加载时，可以请求任何部分。如果当前未加载该节，则链接旁边将显示加载图标

加载请求的节后，加载将停止，它将等待用户停止滚动，然后使用

elem.scrollIntoView（{behavior:'smooth'，block:'start'）滚动到请求的节

我试过的

• 我已经验证了它是滚动到正确的元素，没有其他元素的后记
• 我转而使用MutationObserver来了解元素何时添加到DOM中
• 我尝试在滚动之前等待requestAnimationFrame
• 我尝试在滚动之前添加一个短的500毫秒超时
• 我尝试在滚动前添加60秒超时，以确保我在任何时候都没有与页面交互
• 我尝试使用scrollTo而不是scrollIntoView滚动（相同的行为）
• 我在Edge中试过（行为略有不同，但问题相同）

源代码 所有相关的源代码都可以在（包括源代码图）中找到

• 我在第156行插入部分

• 我把装货锁在80号线上

• 我等待用户停止在第84行滚动

• 在第73行调用scrollIntoView

---

非常感谢您的帮助

如果您想在这里找到解决方案，则需要提供代码。代码的外部链接不算在内，因为它们可能会变成断开的链接。如果你提供静态内容，你可以定义保存延迟媒体的“替换元素”的高度（例如，将保存视频的元素的CSS高度设置为加载视频时的实际高度）。@Kaido刚刚检查，我在图像和视频上明确设置高度，并确保它们在加载之前使用它（滚动时节大小不变）。

previous.before(next)

previous.after(next)

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

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

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