我目前在移动设备上使用 twitter bootstrap 3 modal。它在桌面上运行得非常好，但是在移动设备上，每当我滚动它时，它也会滚动模态后面的窗口。如何防止这种情况发生？
【问题讨论】：
标签： twitter-bootstrap twitter-bootstrap-3
对于 BOOTSTRAP 3
我找到了一个对我的网站来说似乎足够好的解决方案。
CSS：
body.modal-open > .wrap {
overflow: hidden;
height: 100%;
}
.modal-content,
.modal-dialog,
.modal-body {
height: inherit;
min-height: 100%;
}
.modal {
min-height: 100%;
}
HTML：
<body>
<div class="wrap">All non-modal content</div>
<div class="modal"></div>
</body>
所以在模态打开的情况下，所有非模态内容都被限制在视口的高度，溢出被隐藏，这样就阻止了主站点的滚动，而模态仍然可以滚动。
编辑：此修复在 Firefox 中存在一些问题。
我的网站的修复是（仅限 FF 媒体查询）：
@-moz-document url-prefix() {
.modal-body { height: auto; min-height: 100%; }
.modal { height: auto; min-height: 100%; }
.modal-dialog {
width: 100%;
height: 100%;
min-height: 100%;
padding: 0;
margin: 0;
top: 0;
left: 0;
}
.modal-content {
height: auto;
min-height: 100%;
border-radius: 0;
border: 0px solid #000;
margin: 0;
padding: 0;
top: 0;
left: 0;
}
}
【讨论】：
是的，当我今天在 iphone 6s 上遇到这个问题时，这非常烦人。
这似乎仍然是一个问题，即使使用最新的引导程序（目前为 3.3.6）。
CSS Quickfix解决方案：
body.modal-open { position: fixed; }
“请注意，当模式打开时，这会产生“滚动”到页面顶部的副作用。”
查看有关此解决方案的更多详细信息here
Javascript/jQuery解决方案：
更好的解决方案是使用bootstrap's modal events。此解决方案集成了 quickfix 方法，但修复了“页面顶部”问题。 然后，您可以根据事件根据需要更改 css。
在下面的代码中，我在事件show.bs.modal 上设置了窗口的当前位置（该值用于修复“快速修复”问题）。
然后我对shown.bs.modal 事件应用css 快速修复。换句话说，在模态弹出之后。
最后，当模态框关闭时，我将主体的位置切换到相对位置（我相信也可以设置为静态）并将窗口滚动回原来的位置。
// set current position
var cPosition = false;
$('.modal').on('show.bs.modal', function(){
cPosition = $(window).scrollTop();
})
.on('shown.bs.modal', function(){
$('body').css({
position:'fixed'
});
})
.on('hide.bs.modal', function(){
$('body').css({
position:'relative'
});
window.scrollTo(0, cPosition);
});
对于任何有 javascript 经验的人来说，设置应该相对简单。
希望他们能在 bootstrap 4 中解决这个问题，但在那之前，希望这个答案能帮助其他有类似问题的人。
【讨论】：
我注意到它只会在模式中滚动时滚动背景页面，并且您点击模式的底部，然后如果您尝试继续向下滚动，它会滚动背景页面。查看右侧的溢出栏，它仅在模式打开时可见（在 Chrome-Android 上）
效果好像是把modal滚动到modal的程度，然后在modal还打开的情况下自动滚动背景页面。
【讨论】：
有趣的是，他们在文档中解决了这个问题，但没有提供太多解决方案：
“对溢出的支持：隐藏在 <body> 元素上在 iOS 和 Android 中非常有限。为此，当您在这些设备的浏览器中滚动超过模式的顶部或底部时，<body>内容将开始滚动。”
http://getbootstrap.com/getting-started/#overflow-and-scrolling
【讨论】：
嘿，伙计们，我想我找到了 Bootstrap 3 的修复程序。目前这对我在 iphone 和 android 上都有效。它是数小时搜索、阅读和测试的混搭。因此，如果您在这里看到您的部分代码，那就感谢您了，哈哈。
@media only screen and (max-device-width:768px){
body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
}
body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute;
}
body {
overflow-x: hidden;
overflow-y: scroll !important;
}
特定媒体出现在桌面上的原因是，当模式打开页面上的所有内容时，我遇到了问题，页面上的所有内容会从居中转移到左侧。看起来像废话。因此，这针对您需要滚动的平板电脑大小的设备。移动设备和平板电脑仍然有轻微的变化，但真的不多。让我知道这是否适合你们。希望这能把钉子钉在棺材里
【讨论】：
.modal-open .modal .modal-dialog {
max-height: 100%;
}
这对我有用！
【讨论】：
对于引导程序 3
我通过iscroll.js找到了移动设备（触摸屏）的解决方案
在modal的内容中添加：
<div id="smartScroll"> Content of the modal </div>
在 .js 上初始化
var myScroll = new IScroll('#smartScroll', {
mouseWheel: true,
scrollbars: true,
click: true
});
【讨论】：