在 iOS7、chrome 和 safari 中，在输入字段的焦点上，页面滚动。我该如何阻止它？

【问题标题】：In iOS7, chrome & safari, on focus of an input field, the page scrolls. How do I stop that?在 iOS7、chrome 和 safari 中，在输入字段的焦点上，页面滚动。我该如何阻止它？
【发布时间】：2014-03-12 08:28:18
【问题描述】：

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

如果用户在其中点击该字段并且我希望滚动仍然可以工作，我希望该字段获得焦点，但是在输入字段焦点上发生的默认滚动，我希望它停止。

我该怎么做？

这是一个示例 JS fiddle：http://jsfiddle.net/6HvUh/

代码：

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

【问题讨论】：

你有任何来源/例子吗？ JSFiddle？
@AlexvandenHoogen 我用一个小提琴样本更新了这个问题。

标签： javascript jquery ios google-chrome safari

【解决方案1】：

iOS Safari 将始终尝试将焦点输入集中在可见屏幕的中心。这与position: fixed（在 iOS 中有点错误）相结合，可能会产生奇怪的效果。

如果可能，我的建议是不要使用position: fixed。您可以通过以下方式更改页面：

将您的文本或所有可滚动的内容包装在具有“可滚动”类的 div 中。
将输入的位置更改为absolute（或其容器的位置）。
添加一些 CSS：

div.scrollable { 宽度：100%；高度：100%；溢出：自动； -webkit-溢出滚动：触摸； }
```
html, body 
{ 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
}
```

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

【讨论】：