twitter-bootstrap 关于移动滚动问题的 twitter bootstrap 3 模态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21024774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter bootstrap 3 modal on mobile scroll issues
提问by adit
I am currently using twitter bootstrap 3 modal on mobile. It works perfectly fine on desktop, however on mobile whenever I scroll it also scrolls the window behind the modal. How do I prevent this from happening?
我目前在移动设备上使用 twitter bootstrap 3 modal。它在桌面上工作得很好，但是在移动设备上，每当我滚动它时，它也会滚动模态后面的窗口。我如何防止这种情况发生？
采纳答案by Markus Pint
FOR BOOTSTRAP 3
对于引导程序 3
I found a fix for this issue that seems to be good enough for my site.
我找到了一个解决这个问题的方法，它似乎对我的网站来说已经足够好了。
CSS:
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:
HTML：
<body>
<div class="wrap">All non-modal content</div>
<div class="modal"></div>
</body>
So in the case that a modal is open, all non-modal content is limited to the height of the viewport and overflow is hidden, which prevents the main site from being scrolled, while the modal can still be scrolled.
所以在一个模态打开的情况下，所有非模态内容都被限制在视口的高度范围内，并且溢出被隐藏，这样可以防止主站点被滚动，而模态仍然可以滚动。
EDIT: This fix has some issues in Firefox.
编辑：此修复程序在 Firefox 中存在一些问题。
Fix for my site was (FF only media query):
我的网站的修复是（仅 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;
}
}
回答by Truchainz
Yea this was super annoying when I came across this issue on my iphone 6s today.
是的，当我今天在我的 iphone 6s 上遇到这个问题时，这非常烦人。
This still seems to be an issue, even with the latest bootstrap (3.3.6at my moment).
即使使用最新的引导程序（目前为3.3.6），这似乎仍然是一个问题。
CSS QuickfixSolution:
CSS 快速修复解决方案：
body.modal-open { position: fixed; }
"Note that this has the side-effect of "scrolling" to the top of the page while the modal is open."
“请注意，当模态打开时，这具有“滚动”到页面顶部的副作用。”
See more details about this solution here
在此处查看有关此解决方案的更多详细信息
Javascript/jQuerySolution:
Javascript/jQuery解决方案：
A better solution would be to utilize bootstrap's modal events. This solution integrates the quickfix method, but fixes the 'top of page' problem. You can then alter the css as needed depending on the event.
更好的解决方案是利用bootstrap 的 modal events。此解决方案集成了快速修复方法，但修复了“页面顶部”问题。然后，您可以根据事件根据需要更改 css。
In my code below, I set the current position of the window on the event show.bs.modal(this value is used to fix the 'quickfix' problem).
在下面的代码中，我在事件上设置了窗口的当前位置show.bs.modal（该值用于修复“quickfix”问题）。
I then apply the css quick fix on the shown.bs.modalevent. In other words, after the modal pops up.
然后我对shown.bs.modal事件应用 css 快速修复。换句话说，在模态弹出之后。
Finally, when the modal is closed, I switch the body's position to relative (can be set to static as well I believe) and scroll the window back to its original position.
最后，当模态关闭时，我将身体的位置切换到相对位置（我相信也可以设置为静态）并将窗口滚动回其原始位置。
// 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);
});
Should be relatively simple to set up for anyone with some javascript experience.
对于有一些 javascript 经验的任何人来说，设置起来应该相对简单。
Hopefully they will solve this issue in bootstrap 4, but until then, hope this answer helps out other people with similar problems.
希望他们能在 bootstrap 4 中解决这个问题，但在那之前，希望这个答案能帮助其他有类似问题的人。
回答by wesww
Interestingly enough, they address this in the docs without offering much in the way of a solution:
有趣的是，他们在文档中解决了这个问题，但没有提供太多解决方案：
"Support for overflow: hidden on the <body>element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <body>content will begin to scroll."
“对溢出的支持：<body>在 iOS 和 Android 中隐藏在元素上非常有限。为此，当你在这些设备的浏览器<body>中滚动模式的顶部或底部时，内容将开始滚动。”
http://getbootstrap.com/getting-started/#overflow-and-scrolling
http://getbootstrap.com/getting-started/#overflow-and-scrolling
回答by Jonathon Batson
I have noticed that it only scrolls the background page when in the modal your scrolling and you hit the bottom of the modal, then if you try to keep scrolling down it scrolls the background page. Look to the right side overflow bar, it just visible when the modal is open (on Chrome-Android)
我注意到它仅在模式中滚动时滚动背景页面并且您点击模式底部，然后如果您尝试继续向下滚动它会滚动背景页面。查看右侧的溢出栏，当模态打开时它才可见（在 Chrome-Android 上）
Seems like the effect is to scroll the modal to the extent of modal, then automatically scroll the background page even though the modal is still open.
效果好像是把modal滚动到modal的程度，然后在modal还开着的情况下自动滚动背景页面。
回答by JoeyD
Hey guys so i think i found a fix for Bootstrap 3. This is working for me on iphone and android at the moment. Its a mash up of hours upon hours of searching, reading and testing. So if you see parts of your code in here credit goes to you lol.
嘿伙计们，我想我找到了 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;
}
The reason the media specific is on there is on a desktop i was having issues with when the modal would open all content on the page would shift from centered to left. Looked like crap. So this targets up to tablet size devices where you would need to scroll. There is still a slight shift on mobile and tablet but its really not much. Let me know if this works for you guys. Hopefully this puts the nail in the coffin
媒体特定在那里的原因是在桌面上我遇到问题，当模态打开页面上的所有内容时，会从居中移到左侧。看起来像废话。因此，这适用于您需要滚动的平板电脑大小的设备。手机和平板电脑仍然有轻微的变化，但实际上并不多。让我知道这是否适合你们。希望这能把钉子钉在棺材里
回答by Ferhat
For Bootstrap 3
对于 Bootstrap 3
I found a solution for mobile devices (touch screen) with iscroll.js
我用iscroll.js找到了移动设备（触摸屏）的解决方案
in the content of the modal add:
在模态的内容中添加：
<div id="smartScroll"> Content of the modal </div>
To initialize on .js
在 .js 上初始化
var myScroll = new IScroll('#smartScroll', {
mouseWheel: true,
scrollbars: true,
click: true
});
回答by Jince George
.modal-open .modal .modal-dialog {
max-height: 100%;
}
This works for me!
这对我有用！
