knockout.js 移动的Safari:为什么windows.scrollTo(0,0)不能滚动到(0,0)?

lzfw57am  于 2022-11-10  发布在  Windows
关注(0)|答案(4)|浏览(175)

我使用Bootstrap 3、Sammy.js和Knockout 3构建了一个小型的单页面Web应用程序。我发现,当页面向下滚动时,当我同时更改location.hash时,我无法让window.scrollTo(0, 0)在移动的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答案/建议(例如The same old issue, .scrollTop(0) not working in Chrome & Safari);通常的补救措施(在setTimeout中 Package )不会改变这种行为-它仍然滚动到页面顶部附近的某个地方,但不完全滚动到顶部。
页首样式:

<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检查器对此进行了深入研究,就页面结构而言,似乎没有什么不合适的地方。我只是不确定在这里要寻找什么-有什么想法吗?

编辑:

到目前为止,我还不能在我的应用程序代码之外重现这个过程。我正在尝试让这个过程在JSFiddle中中断--在这个程序中,它工作正常(例如,它滚动到0,0,这是它应该的):是的。

rdlzhqv9

rdlzhqv91#

我设法通过在元素上使用height: 100vhmin-height: 100vh重新创建了这个问题。我将我的CSS改为使用100%(这有点麻烦),问题就消失了。

zlwx9yxi

zlwx9yxi2#

请尝试设置scrollTo(-n,0);“n”为小于0的任何数字

2w3kk1z5

2w3kk1z53#

在我的例子中,同样的问题,但它来自于我在一个iframe中的事实。所以做window.top.scrollTo(0,0)成功了!!!!

qgzx9mmu

qgzx9mmu4#

实现这一点的一个技巧是:

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

相关问题