如何防止移动浏览器上的Bootstrap 3模式打开时的背景滚动？
Bootstrap 3模式在移动平台上打开时如何防止背景滚动？ 在桌面浏览器上，背景被禁止滚动并按照原样运行。
在移动浏览器（Safari ios，Chrome ios等）上，打开模式并用手指滚动时，背景也会像模式一样滚动。 我如何防止？
看到这里： https : //github.com/twbs/bootstrap/issues/7501
所以试试：
$('body').css('overflow','hidden'); $('body').css('position','fixed'); V3.0.0。 应该已经解决了这个问题。 你使用最新的版本？ 如果是的话， 请在https://github.com/twbs/bootstrap/上发帖;
尝试这个，
body.modal-open { overflow: hidden; position:fixed; width: 100%; }
我试着接受的答案，防止滚动的身体，但有滚动的问题顶部。 这应该解决这两个问题。
作为一个方面的说明，它出现溢出：隐藏不适用于iOS Safari的身体只有iOS Chrome工作正常。
var scrollPos = 0; $('.modal') .on('show.bs.modal', function (){ scrollPos = $('body').scrollTop(); $('body').css({ overflow: 'hidden', position: 'fixed', top : -scrollPos }); }) .on('hide.bs.modal', function (){ $('body').css({ overflow: '', position: '', top: '' }).scrollTop(scrollPos); });
$('.modal') .on('shown', function(){ console.log('show'); $('body').css({overflow: 'hidden'}); }) .on('hidden', function(){ $('body').css({overflow: ''}); });
使用这一个
没有脚本需要。
BS 3在身体上设置一个.modal-open类，你可以使用它来设置位置和溢出值（用LESS）。
body { font-family:'Open Sans'; margin:0; &.modal-open { position:fixed; overflow:hidden; .modal { overflow: scroll; @media only screen and (min-resolution:150dpi) and (max-width: @screen-sm), only screen and (-webkit-min-device-pixel-ratio:1.5) { overflow: scroll; -webkit-overflow-scrolling: touch; } } } }
如果你使用jQuery，你可以用scrollTop来做到这一点
- 保存身体的垂直滚动位置;
- 禁用正文上的滚动;
- 显示模式;
- closures模式;
- 在身体上的重新启用的滚动;
- 设置保存的滚动位置。
#modal { bottom: 0; position: fixed; overflow-y: scroll; overflow-x: hidden; top: 0; width: 100%; }
所选的解决scheme的工作原理，但他们也把背景捕捉到顶部的滚动位置。 我扩展了上面的代码来修复这个“跳跃”。
//Set 2 global variables var scrollTopPosition = 0; var lastKnownScrollTopPosition = 0; //when the document loads $(document).ready(function(){ //this only runs on the right platform -- this step is not necessary, it should work on all platforms if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) { //There is some css below that applies here $('body').addClass('platform-ios'); //As you scroll, record the scrolltop position in global variable $(window).scroll(function () { scrollTopPosition = $(document).scrollTop(); }); //when the modal displays, set the top of the (now fixed position) body to force it to the stay in the same place $('.modal').on('show.bs.modal', function () { //scroll position is position, but top is negative $('body').css('top', (scrollTopPosition * -1)); //save this number for later lastKnownScrollTopPosition = scrollTopPosition; }); //on modal hide $('.modal').on('hidden.bs.modal', function () { //force scroll the body back down to the right spot (you cannot just use scrollTopPosition, because it gets set to zero when the position of the body is changed by bootstrap $('body').scrollTop(lastKnownScrollTopPosition); }); } });
CSS非常简单：
// You probably already have this, but just in case you don't body.modal-open { overflow: hidden; width: 100%; height: 100%; } //only on this platform does it need to be fixed as well body.platform-ios.modal-open { position: fixed; }
有这个问题，iPhone + Safari需要添加：
position: fixed;
正如其他地方提到的那样，这造成了一个滚动到顶部的问题。 解决这个问题的方法就是在模态打开的情况下捕捉到顶部的位置，然后在模态closures的位置生成该位置的animation
在模态打开时：
scrollTo = $('body').scrollTop(); $('body').css("position", "fixed");
在模态closures
$('body').css("position", "static"); $('body').animate({scrollTop: scrollTo}, 0);
我以为你可能会忘记将属性data-toggle="modal"到触发模式popup事件的链接或button。 首先，我也遇到了同样的问题，但在添加上面的属性之后，它对我来说很好。
除了@Karthick Kumar从引导文件 回答
节目在事件开始时触发
显示在一个动作完成时触发
…所以它应该是：
$('.modal') .on('show.bs.modal', function (){ $('body').css('overflow', 'hidden'); }) .on('hide.bs.modal', function (){ // Also if you are using multiple modals (cascade) - additional check if ($('.modal.in').length == 1) { $('body').css('overflow', 'auto'); } });
嘿家伙，所以我想我find了一个修复。 这在iphone和android目前正在为我工作。 它是search，阅读和testing数小时的混搭。 所以，如果你在这里看到你的代码的一部分信贷去你lol。
@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; }
媒体具体是在那里的原因是在桌面上我有问题，当模式将打开页面上的所有内容将从中心转移到左侧。 看起来像废话。 所以这个目标直到您需要滚动的平板电脑大小设备。 手机和平板电脑还有一些小小的变化，但其实并不多。 让我知道这是否适合你们。 希望这个钉在棺材里
我find了一个简单的JavaScript / jQuery解决scheme，它利用引导模式事件。
我的解决scheme还解决了这个问题position:fixed问题，滚动的背景页面一直回到顶部，而不是在模式窗口打开/closures时停留在原地。
在这里看到细节
我知道这已被回答，但这些解决scheme都没有为我工作。 我需要采取不同的方法。 我正在使用PhoneGap，并且本机编译我的代码，所以我不得不将背景移到正文。 我希望这可以帮助别人。 或者，如果有更干净的方式做到这一点，请随时发表评论…
$(document).on('shown.bs.modal', '.modal', function (e) { $("#" + e.target.id).find(".modal-backdrop").css("z-index", $("#" + e.target.id).css("z-index")).insertBefore("#" + e.target.id); });
使用position:fixed有滚动身体顶部的副作用。
如果你的身体没有滚动到顶部，请注意使用position:fixed 。 如果模式打开，只需禁用身体上的touchmove。 注意：模态本身仍然能够触摸滚动（如果大于屏幕）。
CSS：
body.modal-open { overflow: hidden; width: 100%; /* NO position:fixed here*/ }
JS：
$('.modal').on('show.bs.modal', function (ev) { // prevent body from scrolling when modal opens $('body').bind('touchmove', function(e){ if (!$(e.target).parents().hasClass( '.modal' )){ //only prevent touch move if it is not the modal e.preventDefault() } }) }) $('.modal').on('hide.bs.modal', function (e) { //unbind the touchmove restrictions from body when modal closes $('body').unbind('touchmove'); })
编辑：请注意，对于非常小的模式，您可能需要将以下行添加到您的CSS：
.modal-dialog{ height: 100%; }
感谢JDiApice在iOS 8.x中综合并扩展了其他贡献者的工作模式滚动问题＃14839 ：
@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. */
与我们尝试的其他解决scheme不同，在popup窗口模式closures后，它不会将背景滚动到顶部。
我打开模态之后，模态和事实上模态滚动的错误，这个CSS解决了我的问题：
.modal { overflow-y: auto; padding-right: 15px; }
上面的答案没有帮助，所以我做的是：
.modal { -webkit-overflow-scrolling: touch; }
我特别的问题是当我加载后增加模态大小。
这是一个已知的iOS问题， 请看这里 。 由于它不会破坏其他任何东西，上述解决scheme已经足够满足我的需求。
这可能有点像在这里击败死马..但是，我目前通过香草JS在DIY模式上实施的解决scheme：
在模态表演上：
if (document.body.style.position !== 'fixed') { document.body.style.top = -window.scrollY + 'px'; document.body.style.position = 'fixed'; }
模态隐藏：
document.body.style.position = ''; window.scrollTo(0, -parseInt(document.body.style.top, 10)); document.body.style.top = '';
我的解决scheme
Ver en jsfiddle
//Fix modal mobile Boostrap 3 function Show(id){ //Fix CSS $(".modal-footer").css({"padding":"19px 20px 20px","margin-top":"15px","text-align":"right","border-top":"1px solid #e5e5e5"}); $(".modal-body").css("overflow-y","auto"); //Fix .modal-body height $('#'+id).on('shown.bs.modal',function(){ $("#"+id+">.modal-dialog>.modal-content>.modal-body").css("height","auto"); h1=$("#"+id+">.modal-dialog").height(); h2=$(window).height(); h3=$("#"+id+">.modal-dialog>.modal-content>.modal-body").height(); h4=h2-(h1-h3); if($(window).width()>=768){ if(h1>h2){ $("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4); } $("#"+id+">.modal-dialog").css("margin","30px auto"); $("#"+id+">.modal-dialog>.modal-content").css("border","1px solid rgba(0,0,0,0.2)"); $("#"+id+">.modal-dialog>.modal-content").css("border-radius",6); if($("#"+id+">.modal-dialog").height()+30>h2){ $("#"+id+">.modal-dialog").css("margin-top","0px"); $("#"+id+">.modal-dialog").css("margin-bottom","0px"); } } else{ //Fix full-screen in mobiles $("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4); $("#"+id+">.modal-dialog").css("margin",0); $("#"+id+">.modal-dialog>.modal-content").css("border",0); $("#"+id+">.modal-dialog>.modal-content").css("border-radius",0); } //Aply changes on screen resize (example: mobile orientation) window.onresize=function(){ $("#"+id+">.modal-dialog>.modal-content>.modal-body").css("height","auto"); h1=$("#"+id+">.modal-dialog").height(); h2=$(window).height(); h3=$("#"+id+">.modal-dialog>.modal-content>.modal-body").height(); h4=h2-(h1-h3); if($(window).width()>=768){ if(h1>h2){ $("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4); } $("#"+id+">.modal-dialog").css("margin","30px auto"); $("#"+id+">.modal-dialog>.modal-content").css("border","1px solid rgba(0,0,0,0.2)"); $("#"+id+">.modal-dialog>.modal-content").css("border-radius",6); if($("#"+id+">.modal-dialog").height()+30>h2){ $("#"+id+">.modal-dialog").css("margin-top","0px"); $("#"+id+">.modal-dialog").css("margin-bottom","0px"); } } else{ //Fix full-screen in mobiles $("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4); $("#"+id+">.modal-dialog").css("margin",0); $("#"+id+">.modal-dialog>.modal-content").css("border",0); $("#"+id+">.modal-dialog>.modal-content").css("border-radius",0); } }; }); //Free event listener $('#'+id).on('hide.bs.modal',function(){ window.onresize=function(){}; }); //Mobile haven't scrollbar, so this is touch event scrollbar implementation var y1=0; var y2=0; var div=$("#"+id+">.modal-dialog>.modal-content>.modal-body")[0]; div.addEventListener("touchstart",function(event){ y1=event.touches[0].clientY; }); div.addEventListener("touchmove",function(event){ event.preventDefault(); y2=event.touches[0].clientY; var limite=div.scrollHeight-div.clientHeight; var diff=div.scrollTop+y1-y2; if(diff<0)diff=0; if(diff>limite)diff=limite; div.scrollTop=diff; y1=y2; }); //Fix position modal, scroll to top. $('html, body').scrollTop(0); //Show $("#"+id).modal('show'); }
