禁用浏览器缓存时，设置div的scrollTop至图片顶部却自动滚动到<ins>元素位置的问题求解

我完全理解你的困扰——明明已经等图片加载完成，计算好了正确的滚动位置，结果禁用缓存时浏览器却自动把滚动条拉到了元素那里，只有用延时再设置一次scrollTop才能解决，这确实像个不太优雅的临时hack。

问题根源分析 #

核心问题其实出在克隆后的图片会重新加载。你代码里只等待了blueprintDiv中图片的加载完成，但当你把节点克隆到newDiv后，因为浏览器缓存被禁用，新的<img>元素会重新发起图片请求（哪怕src和之前的一样）。当这张图片再次加载完成时，会触发页面布局重排，浏览器可能会自动调整滚动位置（比如默认尝试让<ins>这类编辑标记元素可见），直接覆盖了你之前设置的scrollTop值。

更优雅的解决方案 #

给你几个干净的解决思路，不用依赖固定延时的setTimeout：

方案一：等待新div中的图片加载完成后再设置滚动位置

既然克隆后的图片会重新加载，那我们直接监听新div里图片的加载状态，等它完全加载、布局稳定后再设置scrollTop：

// ... 前面创建newDiv的代码不变

document.body.textContent = "";
document.body.appendChild(newDiv);

// 获取新div里的图片，等待它加载完成
const newImg = newDiv.querySelector("img");
const waitNewImg = newImg.complete 
    ? Promise.resolve() 
    : new Promise(resolve => {
        newImg.onload = newImg.onerror = resolve;
      });

waitNewImg.then(() => {
    newDiv.scrollTop = offsetTop;
    console.log(`最终ScrollTop: ${newDiv.scrollTop}; 目标值: ${offsetTop}`);
});

这个方案从根源上解决问题，确保所有影响布局的资源都加载完成后再调整滚动位置，完全避免浏览器后续的自动调整。

方案二：用requestAnimationFrame确保布局稳定后设置

如果不想重复监听图片加载，也可以利用requestAnimationFrame——它会在浏览器下一次重绘前执行代码，这时候页面布局已经稳定：

document.body.textContent = "";
document.body.appendChild(newDiv);

// 利用requestAnimationFrame等待布局完成
requestAnimationFrame(() => {
    newDiv.scrollTop = offsetTop;
    // 再加一层确保生效，防止浏览器还有后续布局调整
    requestAnimationFrame(() => {
        if (newDiv.scrollTop !== offsetTop) {
            newDiv.scrollTop = offsetTop;
        }
    });
});

这个方案比固定延时的setTimeout更可靠，因为它是基于浏览器的渲染周期，能适配不同设备的性能差异，不会出现延时太长或太短的问题。

方案三：拦截并修正意外的滚动行为

如果场景不允许等待图片加载，也可以直接监听scroll事件，当发现滚动位置被意外修改时，修正回目标值：

document.body.textContent = "";
document.body.appendChild(newDiv);

const targetScrollTop = offsetTop;
newDiv.scrollTop = targetScrollTop;

function fixScrollPosition() {
    if (newDiv.scrollTop !== targetScrollTop) {
        newDiv.scrollTop = targetScrollTop;
        // 修正完成后移除监听，避免重复触发
        newDiv.removeEventListener('scroll', fixScrollPosition);
    }
}

newDiv.addEventListener('scroll', fixScrollPosition);

这个方案适合那些需要立即显示内容，同时要修正后续意外滚动的场景。

总结 #

最推荐的是方案一，因为它直接针对问题根源，逻辑清晰且可靠。方案二则是解决异步布局问题的通用方案，比固定延时的hack优雅得多。

备注：内容来源于stack exchange，提问作者Sedenion