Preventing body scrolling to top in mobile Safari/iPad/iOS 8

Question

I am using the bootstrap affix component to give a fixed nav bar at the top of the page. This nav bar contains form elements. When a form element is clicked on (given focus) the body of the page scrolls to the top. Is there a way to override this behaviour to prevent the scrolling?

Answer 1

To save someone else 4 hours+ trawling for answers I'll attempt to answer my own question.

There doesn't seem to be a solution for using form elements on a fixed div without jumping.

My solution was to change the markup to a bootstrap-style drop-down.

Original select form element markup:

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

Bootstrap style drop-down markup:

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

Created a plunker to demonstrate this: http://plnkr.co/hYTJ9l

https://github.com/takien/FakeSelect library that offers a quick solution by manipulating the rendered markup.

Answer 2

Update the Safari browser to 14 or higher

Answer 3

I have my form in a modal popup. The .modal-open class is added to the body when the modal shows. I added the following style to the body to prevent it from scrolling while the popup is active.

.modal-open {
  position: fixed;
}