javascript - 防止 body 在移动 Safari/iPad/iOS 8 中滚动到顶部

标签 javascript ios css twitter-bootstrap mobile-safari

我正在使用 bootstrap 词缀组件在页面顶部提供一个固定的导航栏。此导航栏包含表单元素。单击表单元素(给定焦点)时,页面主体滚动到顶部。有没有办法覆盖此行为以防止滚动?

最佳答案

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

在固定div上使用form元素不跳转好像没有解决办法

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

原始选择表单元素标记:

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

Bootstrap 样式下拉标记:

   <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通过操作呈现的标记提供快速解决方案的库。

关于javascript - 防止 body 在移动 Safari/iPad/iOS 8 中滚动到顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30749257/

相关文章:

css - 使用 css 将不透明度设置为子 div

javascript - 如何减少setTimeOut中 'current'的时间?

javascript - 未捕获的语法错误 : Unexpected token ILLEGAL? 看起来不错

javascript - 将一个服务(工厂)注入(inject)另一个服务(工厂),两者都是异步的

ios - 推送到另一个 View Controller 时发生随机崩溃

css - 当 child 在位置 :absolute in Angular2 时变长时更改父 div 大小

javascript - Razor View MVC 5 JavaScript - 解析 document.getElementById

ios - 如何以 JSON 格式返回 Glassdoor API

ios - Iphone Xib内部结构

jquery - 克隆的 HTML 元素未显示