防止在加載時整頁向上滾動（）

Question

我正在使用.load()每 5 秒刷新一次div的內容。

當div更新時，整個頁面將向上滾動到頂部。 有什么辦法可以防止這種情況發生嗎？

<body>    
    <app-header condenses reveals effects="waterfall">
      <app-toolbar>
       <div main-title>Title</div>
       <a href="./login/logout.php" tabindex="-1"><paper-button class="custom white" raised>Log Out</paper-button></a>
      </app-toolbar>
    </app-header>

    <div id="loadcards"></div>
</body>

$("#loadcards").load("getGraph.php");

$(document).ready(function(){
  setInterval(function(){       
     $("#loadcards").load("getGraph.php");
  },5000);
});

Answer 1

當您重新加載時，您的頁面會滾動回頂部，因為您的瀏覽器非常短暫地沒有您的 div 的任何內容。 這會導致您的頁面內容變得太小而不需要滾動條，但是當重新應用內容時，它可能會變得足夠大以再次需要滾動條。

選項1

您可以在每次調用重新加載之前將 Y 偏移設置為頁面頂部，然后在頁面完成重新加載時滾動回該偏移（或者如果頁面比以前小，則至少盡可能向下）。

您可以使用以下代碼從窗口頂部獲取當前偏移量：

var offsetY = $(window).scrollTop();

如果要回滾到之前的位置，可以通過調用以下命令來實現：

$('html, body').animate({
    scrollTop: $(this).offset().top
}, 300);

這將逐漸滾動，但如果您希望它立即滾動，您可以將 300 設置為 0。

根據頁面加載的效率，您可能仍會看到頁面內容的跳轉。

選項 2

您也可以將整個 DIV 放入一個固定高度的容器中，然后重新加載里面的內容。 您應該至少在容器 div 上設置一個 min-height。

<div style="min-height: SOME_VALUE">
    <div id="loadcards"></div>
</div>

將 SOME_VALUE 設置為最接近您實際頁面大小的值。 這也應該可以防止頁面跳轉，但即使實際內容較小，也會導致頁面高度最小。

選項 3

最先進的解決方案是使用容器 DIV 並在重新加載之前將高度設置為 LoadPage 的高度。 這樣它只會在您重新加載頁面后重置。

<div id="cardscontainer" style="min-height: SOME_VALUE">
    <div id="loadcards"></div>
</div>

對您的 JS 進行以下更改：

setInterval(function(){
    $("#loadcards").load("getGraph.php");
    $('#cardscontainer').height($('#loadcards').height());
},5000);

編輯：我交換了 SetInterval 回調函數中的 2 個函數，因為如果 LoadCards DIV 比以前小，它會導致奇怪的行為。

防止在加載時整頁向上滾動（）

問題描述

1 個解決方案

解決方案1
1 已采納 2017-01-31 15:03:56

防止在加載時整頁向上滾動（）

問題描述

1 個解決方案

解決方案1 1 已采納 2017-01-31 15:03:56

解決方案1
1 已采納 2017-01-31 15:03:56