在移动 Safari/iPad/iOS 8 中防止正文滚动到顶部答案

【问题标题】：Preventing body scrolling to top in mobile Safari/iPad/iOS 8在移动 Safari/iPad/iOS 8 中防止正文滚动到顶部
【发布时间】：2015-08-25 06:53:39
【问题描述】：

我正在使用引导词缀组件在页面顶部提供一个固定的导航栏。此导航栏包含表单元素。当单击表单元素（获得焦点）时，页面的主体会滚动到顶部。有没有办法覆盖此行为以防止滚动？

【问题讨论】：

你可以尝试使用stringByEvaluatingJavaScriptFromString:和the code from this question

标签： javascript ios css twitter-bootstrap mobile-safari

【解决方案1】：

将 Safari 浏览器更新到 14 或更高版本

【讨论】：

【解决方案2】：

我在模态弹出窗口中有我的表单。当模态显示时， .modal-open 类被添加到正文中。我在 body 中添加了以下样式，以防止它在弹出窗口处于活动状态时滚动。

.modal-open {
  position: fixed;
}

【讨论】：

【解决方案3】：

为了节省其他人 4 小时以上的时间来寻找答案，我将尝试回答我自己的问题。

在固定的div上使用表单元素不跳转似乎没有解决方案。

我的解决方案是将标记更改为引导式下拉菜单。

原始选择表单元素标记：

<select id="gender" name="gender" class="fake-select">
  <option value="Male">Male</option>
  <option value="Female">Female</option>
</select>

引导样式下拉标记：

   <li class="dropdown open">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">Dropdown <span class="caret"></span>/a>
     <ul class="dropdown-menu" role="menu">
       <li><a href="#">Male</a></li>
      <li><a href="#">Female</a></li>
    </ul>
  </li>

创建了一个 plunker 来证明这一点：http://plnkr.co/hYTJ9l

https://github.com/takien/FakeSelect 库，通过操纵呈现的标记提供快速解决方案。

【讨论】：