在移動 Safari/iPad/iOS 8 中防止身體滾動到頂部

Question

我正在使用 bootstrap 詞綴組件在頁面頂部提供一個固定的導航欄。 此導航欄包含表單元素。 當一個表單元素被點擊（給定焦點）時，頁面的主體會滾動到頂部。 有沒有辦法覆蓋此行為以防止滾動？

Answer 1

為了節省別人4個多小時的拖網時間，我將嘗試回答我自己的問題。

在固定的div上不跳過而使用表單元素似乎沒有解決方案。

我的解決方案是將標記更改為引導程序樣式的下拉菜單。

原始選擇表單元素標記：

<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>

創建了一個插件來證明這一點： http ://plnkr.co/hYTJ9l

https://github.com/takien/FakeSelect庫，該庫通過處理渲染的標記提供了快速的解決方案。

Answer 2

我在模式彈出窗口中有表單。 模態顯示時，.modal-open類將添加到主體。 我在主體上添加了以下樣式，以防止其在彈出窗口處於活動狀態時滾動。

.modal-open {
  position: fixed;
}

Answer 3

將 Safari 瀏覽器更新至 14 或更高版本