页面刷新后禁用浏览器的自动滚动？

Posted 2023-02-22

【中文标题】页面刷新后禁用浏览器的自动滚动？

【英文标题】：Disable brower's auto scroll after a page refresh?

【发布时间】：2013-09-08 04:03:00

【问题描述】：

有没有办法禁用某些现代浏览器（Chrome 和 Safari）在页面刷新时记住您的滚动位置的行为？

【问题讨论】：

您为什么要这样做？回到那个位置是很好的用户体验。

@putvande 在大多数情况下 100% 同意，但一个用例是当有一个大型数据表将新数据添加到顶部时，虽然我们可以动态更新数据，但如果用户无论出于何种原因刷新，我们都不想让它们回到原来的滚动位置。鉴于这种体验，这不是他们的预期行为——这也只是 1 个用例，还有其他用例。

任何使用无限滚动加载体验的页面都会出现这个（意料之外的）问题。

【参考方案1】：

对于支持history.scrollRestoration的浏览器，可以关闭自动滚动行为：

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

来源：https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration

【讨论】：

由于这仍然是一个实验属性，有谁知道浏览器支持吗？

太棒了，正是我需要的。就我而言，我正在处理一个有角度的 SPA 应用程序，并且正在努力保持滚动位置。浏览器会在路由器有机会导航之前恢复前一个组件的滚动位置，从而导致跳跃滚动。哦，那些讨厌的浏览器......

大部分浏览器都支持developer.mozilla.org/en-US/docs/Web/API/History/…

【参考方案2】：

你有没有试过在文件准备好后触发这个？

$(document).ready(function()
    window.scrollTo(0, 0);
);

如果这不起作用......

$(document).ready(function()
    setTimeout(function()
        window.scrollTo(0, 0);
    , 1);
);

这会将它推到调用堆栈的底部

【参考方案3】：

不仅适用于 chrome，而且我认为这一切都会很好。

window.onload = function () 
    window.scrollTo(0, 0);
;

更新您的问题后：

我认为如果我们使用一些 cookie 或会话存储会更好。

【讨论】：

这也是我的想法——但我对这种回调没有任何运气——似乎 chrome 在 onload 触发后会自动滚动。

【参考方案4】：

而不是希望 setTimout 最终位于堆栈的底部 - 我宁愿强制它达到我们想要的滚动位置。我仍然认为这是一种 hack，我希望我们绑定到某种浏览器事件。

var scrollToYPos = 100;
var interval = setInterval(checkPos, 0);

function checkPos() 
    if ($(window).scrollTop() == scrollToYPos) 
        clearInterval(interval);
     else 
        window.scrollTo( 0, scrollToYPos );
        checkPos();               
    
      

【参考方案5】：

我遇到了同样的问题。这是我想出的基本解决方案：

      // scroll the user to the comments section if we need to
      wt = win.scrollTop();
      wb = wt + win.height();
      // if scroll position is 0, do this (it's a fresh user), otherwise
      // the browser is likely to resume the user's scroll position, in 
      // which case we don't want to do this
      yab.loaded().done(function() 
        // it seems that browsers (consistently) set the scroll position after
        // page load.  Accordingly wait a 1/4 second (I haven't tested this to the lowest
        // possible timeout) before triggering our logic
        setTimeout(function() 
          // if the window top is 0, scroll the user, otherwise the browser restored
          // the users scroll position (I realize this fails if the users scroll position was 0)
          if(wt === 0) 
            p = self.container.offset().top;
            if(wb != p) 
              win.scrollTop(p - th - 20);         
            
                        
        , 250);
      );

【讨论】：

哦，yab.loaded 是一个承诺，一旦加载窗口就会解决。等效于$(window).load(function() // ... );

【参考方案6】：

我认为最简单的方法是诱使浏览器重新加载它认为是一个新页面。

window.location = window.location

我在其中测试过的所有浏览器都可以正常工作。我个人会远离 onload 回调，因为它们会导致加载期间的跳转，在视觉上不太吸引人。