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上设置至少一个最小高度。

<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 个答案: