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