iOS上的BootStrap Modal背景滚动 [英] BootStrap Modal background scroll on iOS
问题描述
因此,iOS上的模态存在一个已知问题,当启用模态时,向上/向下滑动将滚动主体而不是模态。
So there is this known issue with modal on iOS, when the modal is enabled swiping up/down will scroll the body instead of the modal.
使用bootstrap 3.3 .7
Using bootstrap 3.3.7
尝试使用Google进行搜索,最建议添加
Tried to google it, most suggested adding
body.modal-open {
overflow: hidden !important;
}
但不起作用。
有人建议
body.modal-open {
position: fixed;
}
但是背景会跳到页面顶部。
But background will jump to the top of the page.
所以我现在正在使用
body.modal-open {
overflow: hidden !important;
position: fixed;
width: 100%;
}
#exampleModal {
background: black;
}
作为一种变通办法,因此看不到跳转(但仍然
As a work-around so the jump can't be seen(but still noticeable)
还有其他解决方案吗?
这是我正在工作的网站 http://www.einproductions.com/
This is the site i am working on http://www.einproductions.com/
推荐答案
我采用了@Aditya Prasanthi和@JIm的解决方案,因为一个解决了背景滚动问题,另一个解决了关闭模态后跳转到顶部的问题,并将它们变成了一个最简单的JS脚本:
I've taken the solutions of @Aditya Prasanthi and @JIm, since one fixes the background-scrolling and the other fixes the skip-to-the-top after closing the modal, and turned them into one bare-minimum 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);
});
当然,甚至有可能建议使用一个类来为CSS设置和取消设置CSS。但是,我选择此解决方案仅是在一个地方解决问题(并且也不需要外部CSS)。
It's, of course, possible and even adviced to use a class to set and unset the CSS for the body, however, I choose this solution to resolve a problem just in one place (and not require external CSS as well).
这篇关于iOS上的BootStrap Modal背景滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!