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?
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.
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;
}
将 Safari 浏览器更新至 14 或更高版本
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.