在iOS7中，chrome＆amp; safari，在输入字段的焦点上，页面滚动。我怎么阻止它？

Question

在iOS7，chrome和safari中，在输入字段的焦点上，页面滚动。

如果用户点击它并且我希望滚动仍然有效，我希望该字段是聚焦的，但是在输入字段焦点上发生的默认滚动，我希望它停止。

我该怎么做？

以下是JS小提琴样本：http://jsfiddle.net/6HvUh/

代码：

$(window).on('scroll', function(){
    $('input').animate({'top':100});
});

Answer 1

iOS Safari会始终尝试将焦点输入置于可见屏幕中央。与iOS position: fixed相结合，这可能会导致奇怪的效果。

如果可能，我的建议是不要使用position: fixed。您可以这样更改页面：

1. 将您的文字或可滚动的所有内容包装在带有“可滚动”字样的div中。
2. 将输入的位置更改为absolute（或其容器的位置）。

3. 添加一些CSS：

   div.scrollable {     宽度：100％;     身高：100％;     溢出：自动;     -webkit-overflow-scrolling：touch; }

   html, body 
   { 
       width: 100%; 
       height: 100%; 
       overflow: hidden; 
   }
   

请注意，您的输入永远不会被键盘隐藏。如果您将输入放在页面底部附近，那么无论如何都会看到滚动。