刷新后浏览器的“返回原始位置”发生在Javascript事件链的哪个位置？答案

【问题标题】：Where in the Javascript event chain does the browser's "return to original position" occur following refresh?刷新后浏览器的“返回原始位置”发生在Javascript事件链的哪个位置？
【发布时间】：2013-01-01 09:26:21
【问题描述】：

我有一个繁忙的网页，其中包含许多小部件。有时需要一两秒钟才能加载。

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

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

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

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

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

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

【问题讨论】：

标签： javascript jquery browser cross-browser dom-events

【解决方案1】：

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

但是，如果浏览器运行正常，我怀疑它应该在滚动时在window 上触发onscroll event。这一定是在页面加载事件之后（因为否则浏览器没有什么可以滚动到，所以我会在加载事件之后查找滚动事件并推断页面已被浏览器滚动.

请记住，您必须成功处理页面没有刷新并且您没有收到 onscroll 事件的情况。因此，我要做的（如果可能的话）是假设页面没有滚动，然后如果您确实收到 onscroll 事件，请通过重新定位并牢记新位置来重新开始。在加载然后重新加载的地方有一点“闪光”，但这将处理回调的异步性质。

【讨论】：

我实施了投票解决方案，但您的回答帮助我思考了我的选择。谢谢。

【解决方案2】：

由于这不是标准事件（如您所说），我建议创建一个可以为您进行快速重复测试的小系统，以确保在加载/刷新后您当前高于该 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 弹出然后更高的数字，您会立即收到警报（我们调用我们的函数运行页面的其余部分）。

【讨论】：