防止浏览器在 HTML5 History popstate 上滚动

if ('scrollRestoration' in history) {
  history.scrollRestoration = 'manual';
}

（Announced by Google，2015 年 9 月 2 日）

浏览器支持：

Chrome：支持（从 46 开始）

Firefox：支持（从 46 开始）

IE：不支持

边缘：支持（从 79 开始）

Opera：支持（33 起）

Safari：支持

有关详细信息，请参阅 Browser compatibility on MDN。

---

这是一个reported issue with the mozilla developer core for more than a year now。不幸的是，票并没有真正进展。我认为 Chrome 是一样的：没有可靠的方法来通过 js 处理滚动位置 onpopstate，因为它是本机浏览器行为。

但是，如果您查看 HTML5 history spec，未来还是有希望的，它明确希望滚动位置在状态对象上表示：

历史对象将其浏览上下文的会话历史表示为会话历史条目的平面列表。每个会话历史记录条目由一个 URL 和一个可选的状态对象组成，并且可能还具有标题、文档对象、表单数据、滚动位置以及与之相关的其他信息。

这一点，如果您阅读了上面提到的 Mozilla 票证上的评论，就会发现在不久的将来滚动位置可能不会再恢复 onpopstate，至少对于使用 pushState 的人来说是这样。

不幸的是，在那之前，滚动位置在使用 pushState 时被存储，并且 replaceState 不会替换滚动位置。否则，这将相当容易，并且您可以使用 replaceState 来设置每次用户滚动页面时的当前滚动位置（使用一些谨慎的 onscroll 处理程序）。

同样不幸的是，HTML5 规范没有具体说明何时必须触发 popstate 事件，它只是说：“在导航到会话历史记录条目时在某些情况下触发”，它没有明确说明它是在之前还是之后;如果它总是在之前，那么处理 popstate 之后发生的滚动事件的解决方案是可能的。

取消滚动事件？

此外，如果滚动事件可以取消，这也很容易，但事实并非如此。如果是这样，您可以取消系列中的第一个滚动事件（用户滚动事件就像旅鼠一样，它们有几十个，而历史重新定位触发的滚动事件是一个），您会没事的。

暂时没有解决办法

据我所知，我现在唯一推荐的是等待 HTML5 规范完全实现并在这种情况下随浏览器行为滚动，这意味着：当浏览器允许时为滚动设置动画，并让浏览器在有历史事件时重新定位页面。 您可以影响位置的唯一方法是，当页面定位到可以返回的良好位置时，您使用 pushState。 任何其他解决方案要么必然有错误，要么太特定于浏览器，或两者兼而有之。

---

您将不得不在这里使用某种可怕的浏览器嗅探。对于 Firefox，我会采用您存储滚动位置并恢复它的解决方案。

根据您的描述，我以为我有一个很好的 Webkit 解决方案，但我只是在 Chrome 21 中尝试过，似乎 Chrome 先滚动，然后触发 popstate 事件，然后触发滚动事件。但作为参考，这是我想出的：

function noScrollOnce(event) {
    event.preventDefault();
    document.removeEventListener('scroll', noScrollOnce);
}
window.onpopstate = function () {
    document.addEventListener('scroll', noScrollOnce);
};​

屏幕重绘速度也排除了通过移动 absolute 定位元素来假装页面正在滚动的黑魔法。

所以我 99% 确定答案是你不能，你将不得不使用你在问题中提到的妥协之一。两种浏览器都在 JavaScript 知道之前滚动，因此 JavaScript 只能在事件发生后做出反应。唯一的区别是 Firefox 直到 Javascript 触发后才会绘制屏幕，这就是为什么在 Firefox 中有一个可行的解决方案但在 WebKit 中没有的原因。

---

现在你可以做

history.scrollRestoration = 'manual';

这应该可以防止浏览器滚动。这目前仅适用于 Chrome 46 及更高版本，但似乎 Firefox 也计划支持它

---

解决方案是使用 position: fixed 并指定 top 等于页面的滚动位置。

这是一个例子：

$(window).on('popstate', function()
{
   $('.yourWrapAroundAllContent').css({
      position: 'fixed',
      top: -window.scrollY
   });

   requestAnimationFrame(function()
   {
      $('.yourWrapAroundAllContent').css({
         position: 'static',
         top: 0
      });          
   });
});

是的，您会收到闪烁的滚动条，但它不那么邪恶。

---

以下修复应该适用于所有浏览器。

您可以在卸载事件上将滚动位置设置为 0。您可以在此处阅读有关此事件的信息：https://developer.mozilla.org/en-US/docs/Web/Events/unload。本质上，卸载事件会在您离开页面之前触发。

通过在卸载时将 scrollPosition 设置为 0 意味着当您以设置的 pushState 离开页面时，它将 scrollPosition 设置为 0。当您通过刷新或按下返回到此页面时，它不会自动滚动。

//Listen for unload event. This is triggered when leaving the page.
//Reference: https://developer.mozilla.org/en-US/docs/Web/Events/unload
window.addEventListener('unload', function(e) {
    //set scroll position to the top of the page.
    window.scrollTo(0, 0);
});

---

将 scrollRestoration 设置为手动对我不起作用，这是我的解决方案。

window.addEventListener('popstate', function(e) {
    var scrollTop = document.body.scrollTop;
    window.addEventListener('scroll', function(e) {
        document.body.scrollTop = scrollTop;
    });
});

---

在页面顶部的某处创建一个“跨度”元素，并在加载时将焦点设置为该元素。浏览器将滚动到焦点元素。我知道这是一种解决方法，并且专注于“跨度”不适用于所有浏览器（uhmmm.. Safari）。希望这可以帮助。

---

这是我在一个网站上实现的，该网站希望在触发 poststate 时将滚动位置聚焦到特定元素（后退按钮）：

$(document).ready(function () {

     if (window.history.pushState) {
        //if push supported - push current page onto stack:
        window.history.pushState(null, document.title, document.location.href);
    }

    //add handler:
    $(window).on('popstate', PopStateHandler);
}

//fires when the back button is pressed:
function PopStateHandler(e) {
    emnt= $('#elementID');
    window.scrollTo(0, emnt.position().top);
    alert('scrolling to position');
}

经过测试并在 Firefox 中工作。

Chrome 将滚动到某个位置，然后重新定位回原来的位置。

---

就像其他人说的那样，没有真正的方法可以做到，只有丑陋的hacky方式。删除滚动事件侦听器对我不起作用，所以这是我的丑陋方法：

/// GLOBAL VARS ////////////////////////
var saveScrollPos = false;
var scrollPosSaved = window.pageYOffset;
////////////////////////////////////////

jQuery(document).ready(function($){

    //// Go back with keyboard shortcuts ////
    $(window).keydown(function(e){
        var key = e.keyCode || e.charCode;

        if((e.altKey && key == 37) || (e.altKey && key == 39) || key == 8)
        saveScrollPos = false;
    });
    /////////////////////////////////////////

    //// Go back with back button ////
    $("html").bind("mouseout",  function(){ saveScrollPos = false; });
    //////////////////////////////////

    $("html").bind("mousemove", function(){ saveScrollPos = true; });

    $(window).scroll(function(){
        if(saveScrollPos)
        scrollPosSaved = window.pageYOffset;
        else
        window.scrollTo(0, scrollPosSaved);
    });

});

它适用于 Chrome、FF 和 IE（第一次返回 IE 时它会闪烁）。欢迎任何改进建议！希望这可以帮助。

---

可能想试试这个？

window.onpopstate = function(event) {
  return false;
};

---