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

Question

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

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

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

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

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

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

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

Answer 1

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