移动Safari:为什么是window ?scrollTo(0,0)不滚动到(0,0)

Mobile Safari: why is window.scrollTo(0, 0) not scrolling to (0, 0)?

本文关键字：滚动 scrollTo Safari 为什么 window 移动      更新时间：2023-09-26

我使用Bootstrap 3, Sammy.js和Knockout 3构建了一个小的单页web应用程序。我发现，当页面向下滚动时，当我也改变location.hash时，我无法让window.scrollTo(0, 0)在Mobile Safari上工作-特别是在iPhone 5C的iOS 7上(可能发生在其他iPhone型号上)。

当我尝试这样做时:

self.changeState = function() {
    self.state(State.NewState);
    location.hash = 'somevalue';
    window.scrollTo(0, 0);
};

页面将滚动几乎到顶部-它通常会滚动到Y = 12或13。如果我在用户滚动到页面底部时调用window.scrollTo(0, 0);，它将永远不会滚动到0(并且内容足够高，可以保证滚动到顶部)。

我已经尝试了各种StackOverflow答案/建议(例如，相同的旧问题，. scrolltop(0)不在Chrome中工作;Safari);通常的补救措施(在setTimeout中包装)不会改变行为-它仍然滚动到页面顶部附近的某个地方，但不完全到顶部。

头风格:

<div class="navbar navbar-default navbar-inverse navbar-static-top">

窗口设置:

<meta name="viewport" 
      content="width=device-width, 
               height=device-height, 
               initial-scale=1.0, 
               maximum-scale=1.0, 
               target-densityDpi=device-dpi" />

滚动的尝试:

self.changeState = function() {
    self.state(State.NewState);
    location.hash = 'somevalue';
    window.scrollTo(0, 0);
};

: 

self.changeState = function() {
    self.state(State.NewState);
    location.hash = 'somevalue';
    window.setTimeout(function() {
        window.scrollTo(0, 0);
    }, 0);
};

我已经用Safari Web Inspector深入研究了这个问题，就页面结构而言，似乎没有什么不合适的。我只是不确定在这里要找什么——有什么主意吗?

编辑:

到目前为止，我还没有能够在我的应用程序的代码之外复制这个。我试图让这个打破在一个JSFiddle -在这个，它工作正常(例如，它应该滚动到0,0):http://jsfiddle.net/rringham/n9evU/24/show.

我通过在元素上使用height: 100vh或min-height: 100vh来重新创建这个问题。我把我的CSS改为使用100%(这有点痛苦)，问题消失了。

尝试设置scrollTo(-n, 0);

实现这一点的一个技巧:

window.scrollTo(0, 0);
setTimeout(() => { window.scrollTo(0, 0); }, 100);

这在2023年的iOS Chrome上也不适合我。它可以和Safari一起使用。我发现我既需要通过setTimeout设置延迟，也需要在垂直参数上设置-1而不是0。像这样:

setTimeout(() => {
    window.scroll({ top: -1, left: 0, behavior: "smooth" });
}, 10);

希望这能帮助到我船上的其他人，因为我花了几个小时在上面。

注。我也在摆弄window.location.hash——尽管我没有通过临时删除该代码来研究与此可能的联系……奇怪的错误。0就是0!

在我的例子中，同样的问题，但它来自于我在iframe中的事实。执行window。top。scrollto(0,0)会得到!!!!

相关文章：