iOS上的BootStrap模式背景滚动
iOS上的BootStrap模式背景滚动
提问于 2017-04-23 03:40:05
所以在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/上工作的网站
回答 6
Stack Overflow用户
回答已采纳
发布于 2018-10-01 20:53:22
我采用了@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 )。
Stack Overflow用户
发布于 2017-09-06 16:07:30
请参阅Does overflow:hidden applied to work on iPhone Safari?
在显示模式时，将.freezePage添加到html和正文
$('.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;
}Stack Overflow用户
发布于 2018-06-09 05:50:42
我的解决方案是：
scrollPos = window.scrollY - get current scroll position.
body { position: fixed;
margin-top: -**scrollPos** px);}
然后关闭modal：
body {position: "";
margin-top: "";}
并将滚动位置返回到打开模式窗口之前的位置：
window.scrollTo(0, scrollPos);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43563795
复制相关文章
相似问题