html - モバイルブラウザでBootstrap 3モーダルが開いているときにバックグラウンドスクロールを防ぐ方法は?

Question

モバイルプラットフォームでBootstrap 3モーダルが開いているときにバックグラウンドスクロールを防ぐ方法は? デスクトップ ブラウザでは、背景はスクロールできず、正常に機能します。

モバイル ブラウザ (Safari ios、Chrome ios など) では、モーダルを開いて指でスクロールすると、モーダルと同様に背景もスクロールします。どうすればそれを防ぐことができますか?

Answer 1

ここを参照してください: https://github.com/twbs/bootstrap/issues/7501

だから試してください：

$('body').css('overflow','hidden');
$('body').css('position','fixed');

V3.0.0。この問題を修正する必要がありました。最新バージョンを使用していますか？その場合は、 https://github.com/twbs/bootstrap/に問題を投稿してください。

Answer 2

これを試して、

 body.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
}

Answer 3

$('.modal') 
.on('shown', function(){ 
  console.log('show'); 
  $('body').css({overflow: 'hidden'}); 
}) 
.on('hidden', function(){ 
  $('body').css({overflow: ''}); 
}); 

これを使う

Answer 4

選択したソリューションは機能しますが、背景を一番上のスクロール位置にスナップします。上記のコードを拡張して、その「ジャンプ」を修正しました。

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

Answer 5

jQueryを使用している場合は、scrollTopでこれを行うことができます

1. 本文の垂直スクロール位置を保存します。
2. 本文のスクロールを無効にします。
3. モーダル表示;
4. モーダルを閉じます。
5. 本文のスクロールを再度有効にします。
6. 保存されたスクロール位置を設定します。

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

Answer 6

data-toggle="modal"モーダル ポップアップ イベントをトリガーするリンクまたはボタンに属性を追加するのを忘れているのではないかと思いました。まず、私も同じ問題を抱えていましたが、上記の属性を追加するとうまくいきました。

Answer 7

これにも問題があり、iPhone + Safari を追加する必要がありました。

position: fixed;

他の場所で述べたように、これによりスクロール トゥ トップの問題が発生しました。私にとってうまくいった修正は、モーダルを開いたときに上に位置をキャプチャし、モーダルを閉じるときにその位置にアニメーション化することでした

モーダルを開くと:

scrollTo = $('body').scrollTop();
$('body').css("position", "fixed");

モーダルクローズ時

$('body').css("position", "static");
$('body').animate({scrollTop: scrollTo}, 0);

Answer 8

これは、ここで死んだ馬を打ち負かすようなものかもしれません..しかし、バニラJSを介したDIYモーダルで現在実装されているソリューション:

モーダルショーで：

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 = '';

Answer 9

ブートストラップ モーダル イベントを利用する単純な javascript/jquery ソリューションを見つけました。

position:fixed私の解決策は、モーダルウィンドウが開いたり閉じたりしたときに、背景ページを元の位置にとどまらず、一番上までスクロールするという問題も修正します。

詳細はこちら

Answer 10

iOS 8.x モーダル スクロールの問題 #14839で他の貢献者の作業を統合および拡張したJDiApiceの厚意による:

@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. */

私たちが試した他のソリューションとは異なり、ポップアップ モーダルが閉じた後、背景が一番上にスクロールされません。

Answer 11

これが回答されたことは知っていますが、これらの解決策はどれもうまくいきませんでした。別のアプローチを取る必要がありました。私は 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);

});