BootStrap Modal Background Scrolling on iOS
So this known issue is related to iOS modal where modal option enables scrolling up / down, scrolls body instead of modal.
Using bootstrap 3.3.7
Tried google, most of them suggested adding
body.modal-open {
overflow: hidden !important;
}
but that won't work.
Some have suggested
body.modal-open {
position: fixed;
}
But the background will move to the top of the page.
So now I am using
body.modal-open {
overflow: hidden !important;
position: fixed;
width: 100%;
}
#exampleModal {
background: black;
}
How work, so the jump cannot be seen (but still noticeable)
Are there any other solutions?
This is the site I work on http://www.einproductions.com/
source to share
does this link overflow: hidden applied to <body> work on iPhone Safari?
Added .freezePage parameter to html and body when modal shows
$('.modal').on('shown.bs.modal', function (e) {
$('html').addClass('freezePage');
$('body').addClass('freezePage');
});
$('.modal').on('hidden.bs.modal', function (e) {
$('html').removeClass('freezePage');
$('body').removeClass('freezePage');
});
CSS
.freezePage{
overflow: hidden;
height: 100%;
position: relative;
}
source to share
I took @Aditya Prasanthi and @JIm's solutions since one captures the scrolling on the background and the other captures the skip-to-top after the modal code closes and turns them into one minimal JS script:
let previousScrollY = 0;
$(document).on('show.bs.modal', () => {
previousScrollY = window.scrollY;
$('html').addClass('modal-open').css({
marginTop: -previousScrollY,
overflow: 'hidden',
left: 0,
right: 0,
top: 0,
bottom: 0,
position: 'fixed',
});
}).on('hidden.bs.modal', () => {
$('html').removeClass('modal-open').css({
marginTop: 0,
overflow: 'visible',
left: 'auto',
right: 'auto',
top: 'auto',
bottom: 'auto',
position: 'static',
});
window.scrollTo(0, previousScrollY);
});
Of course it is possible and even recommended to use a class to set and unset CSS for the body, however I choose this solution to address the problem in only one place (and also does not require external CSS).
source to share
My decision:
scrollPos = window.scrollY - get current scroll position.
body { position: fixed;
margin-top: -**scrollPos** px);
}
Then the modal closure:
body {position: "";
margin-top: "";
}
and return the scroll position to point before opening the modal:
window.scrollTo(0, scrollPos);
source to share