在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時。