jun*_*tan 13 css ios twitter-bootstrap
所以在iOS上有模态的已知问题,当启用模态时向上/向下滑动将滚动主体而不是模态.
使用bootstrap 3.3.7
试图谷歌它,大多数建议添加
body.modal-open {
overflow: hidden !important;
}
但它不起作用.
有人建议,
body.modal-open {
position: fixed;
}
但背景将跳到页面顶部.
所以现在我正在使用,
body.modal-open {
overflow: hidden !important;
position: fixed;
width: 100%;
}
#exampleModal {
background: black;
}
作为解决方案,所以无法看到跳跃(但仍然明显)
还有其他解决方案吗？
这是我正在研究的网站http://www.einproductions.com/
Kla*_*eij 18
我采用了@Aditya Prasanthi和@JIm的解决方案,因为一个修复了背景滚动,另一个修复了关闭模式后跳到顶部的问题,并将它们变成了一个最小的JS脚本:
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).
小智 9
请参阅溢出:隐藏应用于<body>在iPhone Safari上工作吗？
当模态显示时,将.freezePage添加到html和body
$('.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;
}
| 归档时间： |
|
| 查看次数： |
14847 次 |
| 最近记录： |