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 在身上设置了一个可用于设置位置和溢出值 (由 LESS 制作) 的.modal-open 类。

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 这样做

保存身体垂直滚动位置;
在身体上禁用滚动;
显示模态
关闭模态
身体上的可重复卷轴
设置保存的滚动位置。



#modal {
    bottom: 0;
    position: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
    top: 0;
    width: 100%;
}



$('.open-modal').click(function (e) {
    e.preventDefault();
    $('#modal').toggle();
    scrollTo = $('body').scrollTop();
    $('body').css("position", "fixed");
});

$('.close-modal').click(function (e) {
    e.preventDefault();
    $('#modal').toggle();
    $('body').css("position", "static");
    $('body').animate({scrollTop: scrollTo}, 0);
});

第七种思路

所选择的解决方案可以工作，但是它们也将背景捕捉到顶部滚动位置。我扩展了上面的代码来修复’jump’ 。

//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;
}