在Javascript事件链中，浏览器的“返回原始位置”在刷新后会发生什么？

Posted 2021-04-13

我有一个繁忙的网页，有很多小部件。有时加载需要一两秒钟。

当我从页面顶部以外的某个位置点击刷新时，我可以看到页面加载就好像scrollTop==0并且在某些时候点回到我的原始位置。

问题是我在.ready()事件处理程序中发生了各种初始化，其中一些依赖于scrollTop和scrollLeft。这些初始化发生在文档返回到其原始位置之前，然后从原始位置给出无意义的结果。

将这些初始化包装在.load()事件处理程序中似乎也不起作用。什么工作是通过在.load()处理程序内的setTimeout添加（相当长的）延迟。出于显而易见的原因，这是不希

这表明“回归原始位置”独立于标准事件链发生，即。未在ECMA标准中指定或依赖于浏览器实现。

处理只有在浏览器返回原始位置后才需要进行初始化的最佳方法是什么？是否有相关事件？有没有办法认识到刷新已经发生并且只在这种情况下延迟？

我的所有测试都在Chrome和Firefox中进行。

答案

由于这不是标准事件（正如您所说），我建议您创建一个可以为您进行快速重复测试的小系统，以确保在加载/刷新后您当前高于该0点，然后为你的小部件运行任何代码等。

var scrollTopInterval;

$(window).load(function () {
  var i = 0;

  scrollTopInterval = setInterval( function () {
    console.log( $(window).scrollTop() );

    if ($(window).scrollTop() > 0) {
      weAreReady(); // do stuff, we are ready to go
      clearInterval(t);
    }

    i++;

    // 2 seconds might be way too much (but you said you needed a long delay)
    if (i >= 2000) { clearInterval(scrollTopInterval); }
  }, 1);
});

function weAreReady() {
   alert('we moved down past 0 after refresh');
}

另外，如果用户开始滚动（可能是第一次加载页面等），请确保我们清除此间隔;

$(window).scroll(function () { 
   clearInterval(scrollTopInterval);
});

这是jsFIddle的当然，你无法刷新jsFiddle，所以只需将代码复制到一个html文件或其他东西（这就是我的测试方式）。

它似乎工作，如果你已经在页面顶部一切都很好，如果你进一步下来你看到0弹出然后更高的数字，你会立即被警告（我们称之为我们的功能来运行其余的的页面）。

另一答案

“返回原始位置”行为是浏览器添加为奖励的功能，而不是标准化的功能。我不认为有一个特定的事件是“浏览器因页面刷新而滚动”事件。

但是，如果浏览器表现正常，我怀疑它应该在onscroll event滚动时触发window。这必然是在页面加载事件之后（因为否则浏览器没有任何内容可以滚动到，所以我会在加载事件之后查找滚动事件并推断该页面已被浏览器滚动。

请记住，您必须成功处理页面未刷新且未获得onscroll事件的情况。因此，我会做的（如果可能的话）是假设页面没有滚动，然后如果你确实得到了onscroll事件，请重新定位，重新定位新的位置。事情正在加载然后重新加载有一些“闪存”，但这将处理回调的异步性质。