3

我有一个 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 的顶部。我猜这会更有意义，但实际上更糟！

4

1 回答 1

2

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

那么，会发生什么？当您替换图像时，在 div 中没有实际图像的几微秒内：旧图像已被丢弃，新图像正在加载。

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

可能的解决方案：min-height在 CSS 中的 div 上，或计算图像尺寸和设置width以及height何时附加它们。

于 2012-05-02T17:16:32.777 回答