我在某个地方有一些HTML。我只想显示上下和下方的某些上下文。我的方法是与

Question

<ins>

，为

<div>

设置适当的高度，然后将

overflow

滚动到适当的位置。 <div>

可能包含高于文本的图像，在这种情况下，我很难正确滚动。如果禁用了浏览器缓存，则大多发生这种情况。
只是一个简单的示例，假设我有一些HTML，其中一个包含一个单个

<div>。为简单起见，假设我希望我的新溢出

<ins>

具有图像的高度，并且我想滚动到图像的顶部，以便图像垂直填充

<ins>

。我计算图像的最高位置并滚动到它。因此，我希望看到完整的图像，但是我看到了

<img>

的顶部。

示例（

jsfiddle

）;开发人员工具并禁用浏览器缓存以进行复制

！

！

<div>代码等待图像加载，然后创建我的新

<div>

。

问题：禁用浏览器缓存，而不是滚动到图像的顶部，而是滚动到

<ins>

文本。此外，控制台输出为：

const blueprintDiv = document.createElement("div");
blueprintDiv.style.cssText = "border: 1px solid; visibility: hidden;";
blueprintDiv.innerHTML = `<p>BEGIN</p><ins>BB<img src="http://www.google.com/intl/en_ALL/images/logo.gif"></ins><p>END1<br><br><br><br><br><br>END2</p>`;
document.body.appendChild(blueprintDiv);

const imgPromises = [Promise.resolve()];
const img = blueprintDiv.querySelector("img");
if (!img.complete) {
    imgPromises.push(new Promise(resolve => { img.onload = img.onerror = resolve; }));
}

Promise.all(imgPromises).then(() => {
    console.log("All images loaded.");
    const newDiv = document.createElement("div");
    newDiv.style.cssText = `border: 1px solid red; display: block; overflow: auto; height: ${img?.offsetHeight}px`;
    for (const child of blueprintDiv.childNodes) {
        newDiv.appendChild(child.cloneNode(true));
    }

    const insTop = blueprintDiv.querySelector("ins").offsetTop - blueprintDiv.offsetTop;
    const imgTop = img.offsetTop - blueprintDiv.offsetTop;
    const offsetTop = Math.min(insTop, imgTop);

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

    console.log(`Direct ScrollTop: ${newDiv.scrollTop}; offsetTop: ${offsetTop}; insTop: ${insTop}; imgTop: ${imgTop}`);
    setTimeout(() => {
        console.log(`Delayed ScrollTop: ${newDiv.scrollTop}; offsetTop: ${offsetTop}; insTop: ${insTop}; imgTop: ${imgTop}`);
        // newDiv.scrollTop = offsetTop; // Uncomment => correct scrolling
    }, 100);
});

，因此，第一次的位置似乎是正确的：<div>

在148，图像顶部在52处。因此，我将

BB

设置为52。 但是，经过短暂的延迟，浏览器以某种方式自动滚动到

"Direct ScrollTop: 52; offsetTop: 52; insTop: 148; imgTop: 52"  
"Delayed ScrollTop: 147; offsetTop: 52; insTop: 148; imgTop: 52"

位置147，而不是在图像的顶部保持52。
第二个问题解决了这个问题，但这对我来说似乎是一个黑客。是否有更干净的方法来解决此问题？
    

我发现，设置图像的高度属性可以解决问题，并将您的

<ins>

滚动到图像的顶部而不是

scrollTop

位置。希望这有帮助

<ins>

，但我无法澄清或提供任何有关其工作原因的相关信息的链接。