防止在加载时向上滚动整页（）答案

【问题标题】：Prevent full page scrolling up on load()防止在加载时向上滚动整页（）
【发布时间】：2017-01-31 13:58:05
【问题描述】：

我正在使用 .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);
});

【问题讨论】：

只更新图层内容，不要清空
或者在#loadcards上设置一个min-height，以防止在添加/删除内容时调整大小。
不幸的是，最小高度不起作用

标签： javascript jquery html css

【解决方案1】：

当您重新加载时，您的页面会滚动回顶部，因为您的浏览器很短暂地没有任何 div 内容。这会导致您的页面内容变得太小而无法使用滚动条，但是当重新应用内容时，它可能会变得足够大以至于再次需要滚动条。

选项 1

您可以在每次调用重新加载之前将 Y 偏移量设置为页面顶部，然后在页面完成重新加载时滚动回该偏移量（或者如果页面比以前小，至少尽可能向下滚动） .

您可以使用以下代码获取当前窗口顶部的偏移量：

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

如果您想滚动回到之前的位置，可以通过调用以下命令来实现：

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

这将逐渐滚动，但如果您希望它立即滚动，您可以将 300 设置为 0。

根据页面加载的效率，您可能仍会看到页面内容的跳转。

选项 2

您也可以将整个 DIV 放入具有固定高度的容器中，然后重新加载其中的内容。您应该在容器 div 上至少设置一个最小高度。

<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 比以前小，它会导致奇怪的行为。

【讨论】：

很高兴你喜欢它。我添加了一个额外的编辑注释，因为我认为你会在不同的场景中遇到问题。看看吧！