Bootstrap 3 Modal Popup prevent scroll by focus on top

Question

I have a couple of Bootstrap modals with a length larger than my screen. This means that Bootstrap automatically will focus on the bottom of the modal.

After showing the modal I've set a focus on the .modal-header like below to show the top of the model instead of the bottom. It's now automatic scrolling to the top but how can I do this without scolling?

 $('.modal-header').focus();

Answer 1

You can use some css scripting there without the focus:

.modal .modal-body {
    max-height: 90vh; // the height you want (vh means viewport height)
    overflow-y: auto; // this will allow the middle area to scroll.
}

And if you still want the focus, you can use this snippet to save the position and restore the position after focusing:

var x = window.scrollX || window.pageXOffset || document.documentElement.scrollTop,
    y = window.scrollY || window.pageYOffset || document.documentElement.scrollLeft;
$('.modal-header').focus();
window.scrollTo(x, y);