twitter-bootstrap 防止移动屏幕上的对话框滚动正文
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18979531/
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
Prevent dialog on mobile screen from scrolling the body
提问by FloatingRock
I'm displaying a dialog on a mobile screen that's longer than the size of the screen (so it scrolls).
我在移动屏幕上显示一个比屏幕大小还长的对话框（所以它会滚动）。
Here's the problem: When you scroll past the bottom of the dialog (I happen to be using Bootstrap 3), I expect it to just stop. Instead, it starts scrolling the underlying body. I've tried everything that's been suggested in thisrecommended solution, and it still doesn't freaking work!
问题是：当您滚动到对话框底部时（我碰巧使用的是 Bootstrap 3），我希望它会停止。相反，它开始滚动底层主体。我已经尝试了此推荐解决方案中建议的所有内容，但仍然无法正常工作！
Here's a live demo of the issue on JSbin, for your viewing pleasure
下面是JSbin上问题的现场演示，供大家观赏
Note: To reproduce the issue, access it using a mobile - any mobile - and attempt to scroll past the end of the dialog. Tried it on Android, and iPhone - doesn't work for either.
注意：要重现该问题，请使用移动设备（任何移动设备）访问它并尝试滚动到对话框末尾。在 Android 和 iPhone 上尝试过 - 对两者都不起作用。
Thanks!
谢谢！
回答by Sven
Try this:
试试这个：
body {
left: 0;
-webkit-overflow-scrolling: touch;
position: fixed;
top: 0;
width: 100%;
}
Works for me (see http://jsbin.com/aXoMaGo/2) in Safari/Chrome on iOS 7 and also gives the Modal a sexy bounce-effect.
在 iOS 7 上的 Safari/Chrome 中对我来说有效（参见http://jsbin.com/aXoMaGo/2），并且还为 Modal 提供了性感的反弹效果。
Final solution that works (even when the dialog is dismissed): https://jsbin.com/aXoMaGo/6. The only downside to this is that it scrolls to the top of the page each time the modal is dismissed.
有效的最终解决方案（即使对话框被关闭）：https: //jsbin.com/aXoMaGo/6。唯一的缺点是每次关闭模态时它都会滚动到页面顶部。
回答by Ollie Williams
The easiest option is to use the overscroll-behaviorCSS property on the popup.
最简单的选择是overscroll-behavior在弹出窗口中使用CSS 属性。
.modal {
overscroll-behavior: contain;
}
This property was added to CSS specifically for this use case.
此属性是专门为此用例添加到 CSS 中的。
回答by am80l
I had a similar issue. Typically overflow:hidden accomplishes this on desktop. For mobile you'll also need to apply position fixed. So, when your dialog is active, add a ".noscroll" class to the body:
我有一个类似的问题。通常溢出：隐藏在桌面上完成此操作。对于移动设备，您还需要应用位置固定。因此，当您的对话框处于活动状态时，向正文添加一个“.noscroll”类：
body.noscroll{
overflow:hidden;
position:fixed;
}
回答by nloko
One issue is that your event names are off for Bootstrap 3. Another is that mobile, webkit-based browsers don't seem to obey overflow: hiddenon the <body>. Try this:
一个问题是，您的活动名称是关闭引导3.另一种是移动的，基于WebKit的浏览器似乎不服从overflow: hidden的<body>。试试这个：
$(function(){
$('#myModal').modal().on('shown.bs.modal', function(){
$('body').css({
position: 'fixed'
});
}).on('hidden.bs.modal', function(){
$('body').css({
position: ''
});
});
});
回答by Anobik
For all those Since I am not stisfied with the Answer it does not work on my note 8 . the screen actually freezes .
对于所有那些因为我对答案不满意所以它不适用于我的笔记 8 。屏幕实际上冻结了。
Here's the hack i created can be buggy but solves the major issue :)
这是我创建的 hack 可能有问题，但解决了主要问题:)
Any clarifications are welcomed :)
欢迎任何澄清:)
回答by AliShafiee
I have same problem !I spend one day to fix this but ....
我有同样的问题！我花了一天时间来解决这个问题，但是......
the only things that I write and work for me is this code i hope it work for ya !
我唯一为我编写和工作的东西就是这段代码，我希望它对你有用！
if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {
$('.modal').on('show.bs.modal', function() {
var scrollNo=$(window).scrollTop();
$('.modal-open').css('position', 'fixed');
});
$('.modal').on('hide.bs.modal', function() {
$('body').css('position', '');
$(window).scrollTop(scrollNo);
});
}
回答by AliShafiee
and this is my modal Html Code
这是我的模态 Html 代码
<div class="modal fade" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" tabindex="-1" aria-describedby="ContentLoader">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Topic title</h4>
</div>
<div class="modal-body">
<!-- some content -->
</div>
<div class="modal-footer">
<!-- footer -->
</div>
</div>
</div>
</div>
回答by Judson Terrell
This is the best solution I have come up with. You call prevent scroll on dialog open, then enable scroll on dialog close.
这是我想出的最好的解决方案。您在对话框打开时调用防止滚动，然后在对话框关闭时启用滚动。
var lastScrollPos = 0;
preventScoll = function () {
lastScrollPos = $('body').scrollTop();
$('body').css('overflow', 'hidden');
$('body').css('position', 'fixed');
}
enableScroll = function () {
$('body').css('position', 'relative');
$('body').css('overflow', 'auto');
window.scrollTo(0, lastScrollPos);
}
