我使用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,这是它应该的):是的。
4条答案
按热度按时间rdlzhqv91#
我设法通过在元素上使用
height: 100vh
或min-height: 100vh
重新创建了这个问题。我将我的CSS改为使用100%
(这有点麻烦),问题就消失了。zlwx9yxi2#
请尝试设置scrollTo(-n,0);“n”为小于0的任何数字
2w3kk1z53#
在我的例子中,同样的问题,但它来自于我在一个iframe中的事实。所以做window.top.scrollTo(0,0)成功了!!!!
qgzx9mmu4#
实现这一点的一个技巧是: