防止移动屏幕上的对话框滚动正文
[英]Prevent dialog on mobile screen from scrolling the body
问题描述
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. 这是问题所在：当你滚动到对话框的底部时（我碰巧使用的是Bootstrap 3），我希望它能够停止。 Instead, it starts scrolling the underlying body. 相反，它开始滚动底层的身体。 I've tried everything that's been suggested in this recommended solution, and it still doesn't freaking work! 我已经试过这就是被认为在一切这个推荐的解决方案，它仍然不会再用的工作！
Here's a live demo of the issue on JSbin, for your viewing pleasure 这是关于JSbin问题的现场演示，为您带来观赏乐趣
http://jsbin.com/EdAhAsU/1/ http://jsbin.com/EdAhAsU/1/
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! 谢谢！
8 个解决方案
解决方案1
11 已采纳 2013-09-27 15:39:24
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 . 有效的最终解决方案（即使解除对话框）： 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. 唯一的缺点是，每次模态被解除时它都会滚动到页面的顶部。
解决方案2
2 2013-09-25 22:10:31
I had a similar issue. 我有一个类似的问题。 Typically overflow:hidden accomplishes this on desktop. 通常，overflow：hidden在桌面上完成此操作。 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;
}
解决方案3
2 2013-09-30 03:35:30
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: hidden on the <body> . 一个问题是你的事件名称是关闭Bootstrap 3.另一个是移动的，基于webkit的浏览器似乎不服从overflow: hidden在<body> 。 Try this: 尝试这个：
$(function(){
$('#myModal').modal().on('shown.bs.modal', function(){
$('body').css({
position: 'fixed'
});
}).on('hidden.bs.modal', function(){
$('body').css({
position: ''
});
});
});
解决方案4
1 2013-09-30 04:54:45
For all those Since I am not stisfied with the Answer it does not work on my note 8 . 对于所有那些因为我对答案不满意所以它不适用于我的笔记8。 the screen actually freezes . 屏幕实际上冻结了。
Here's the hack i created can be buggy but solves the major issue :) 这是我创建的黑客可能是越野车但解决了主要问题:)
Any clarifications are welcomed :) 欢迎任何澄清:)
解决方案5
1 2017-11-16 19:33:48
It doesn't have great browser support yet, but the easiest option is to use the overscroll-behavior CSS property on the popup. 它还没有很好的浏览器支持，但最简单的选择是在弹出窗口中使用overscroll-behavior CSS属性。
.modal {
overscroll-behavior: contain;
}
This property was added to CSS specifically for this use case. 此属性已专门为此用例添加到CSS中。
解决方案6
0 2014-11-14 20:04:05
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);
});
}
解决方案7
0 2014-11-14 20:08:39
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>
解决方案8
0 2015-02-05 16:44:40
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);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.