在DOM操作之后阻止页面滚动

Question

我有一个JavaScript函数，它在页面加载时执行，然后在设置的时间间隔内自动执行。 该函数循环显示在另一个脚本（由PHP生成）中提供的图像。 但是每当这个函数操作DOM时，页面就会滚动回包含我正在编辑的div的div的顶部。 我真的想避免这种情况！

我已经查看了stackOverflow和其他网站上的其他帖子，但它们都涉及用户的操作，通常是jQuery或Ajax以及带锚的链接。 在这种情况下，这些都不适用。

为了让您了解我的HTML：

<div id="the_rest_of_my_page">
  <div id="scrolls_to_the top_of_this">
    <div id="img_div">
      This is where my JavaScript is doing stuff
    </div>
  </div>
</div>

我的JavaScript代码：

function advance_slideshow( )
{
    document.getElementById( img_div ).innerHTML = '<img src="' + img_array[index] + '">';
    index = (index+1) % img_array.length;
    setTimeout('advance_slideshow()', swap_delay);
}

问题非常严重，因为页面会自动向上滚动这么多秒，并且页面上有很多重要的内容。

有谁知道如何防止这种滚动？

编辑：现在我再次尝试，页面在编辑DOM后滚动到页面顶部，而不是在div的顶部。 我猜这会更有意义，但实际上更糟糕！

Answer 1

我在评论中说的似乎是你问题的根源： img的高度没有设置，而父div既没有height也没有min-height 。

那么，会发生什么？ 当您替换图像时，在div中没有​​实际图像的情况下会有一些微秒：旧的图像被丢弃，新图像被加载。

您的父div没有图像= 0高度。 整页较短，滚动跳到顶部。

可能的解决方案：CSS中div的min-height ，或者在附加图像尺寸并设置width和height时。