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。

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

1 个答案: