web-dev-qa-db-ja.com

Bootstrap 3モーダルが起動し、ページが一時的に左に移動する/ブラウザーのスクロールバーの問題

Bootstrap 3.1.0を使用してサイトで作業しています。

モーダルウィンドウが開くと、ブラウザのスクロールバーが一瞬消えてから戻ってきます。閉じても同じです。

ブラウザのスクロールバーとのやり取りなしでただ開閉するようにするにはどうすればよいですか？私は人々が問題を抱えているスタック上の投稿を見てきましたが、私は私の問題に固有の答えを見つけることができませんので、誰かがこのリクエストを行い、誰かがそれを知っており、私にそれをリンクしたいなら、私は感謝しますそれ。投稿する前に、これについて約2時間検索しました。

html5twitter-bootstrapresponsive-designtwitter-bootstrap-3
65
Daniel White

これは私がこの問題について検索したときにgithubで見つけたもので、私にとってはうまくいきます

js：

    $(document).ready(function () {
    $('.modal').on('show.bs.modal', function () {
        if ($(document).height() > $(window).height()) {
            // no-scroll
            $('body').addClass("modal-open-noscroll");
        }
        else {
            $('body').removeClass("modal-open-noscroll");
        }
    });
    $('.modal').on('hide.bs.modal', function () {
        $('body').removeClass("modal-open-noscroll");
    });
})

cssnav-fixed-topおよびnavbar-fixed-bottomがある場合、このcssを使用します。

body.modal-open-noscroll
{
    margin-right: 0!important;
    overflow: hidden;
}
.modal-open-noscroll .navbar-fixed-top, .modal-open .navbar-fixed-bottom
{
    margin-right: 0!important;
}

または、navbar-defaultがある場合はこのcssを使用します

body.modal-open-noscroll 
{
  margin-right: 0!important;
  overflow: hidden;
}
.modal-open-noscroll .navbar-default, .modal-open .navbar-default 
{
  margin-right: 0!important;
}
20
user4314713
.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}

それを取り除きます。これは、モーダルの応答性を高めるために追加されたもので、画面が短すぎる場合は下にスクロールしてモーダルを表示できます。また、モーダルが起動している間、背景がスクロール可能になるのを停止します。その機能が必要ない場合は、私が投稿したそのCSSを使用できます。

詳細：ボディに.modal-openを設定しているため、ボディ上のすべてのスクロールが防止され、ボディスクロールバーが非表示になります。その後、モーダルが起動すると、画面全体を占める暗い背景があり、オーバーフローy：スクロールがあり、スクロールバーを強制的に戻して、拡張されたモーダルが画面の下部を通過した場合でも、スクロールすることができます暗い背景と残りの部分を参照してください。

88
cjd82187

左シフトの問題の修正は、CSSのみを使用して簡単に実行できます。

.modal-open[style] {
padding-right: 0px !important;
}

コードに存在するインラインスタイルを上書きしているだけです。私はWordPressビルドで私のものを使用しており、インラインスタイルがボディに適用されていました。このように見えた：

<body class="home blog logged-in modal-open" style="padding-right: 15px;">

これが誰かを助けることを願っています！

67
ben.kaminski
.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

.modal-open[style] {
    padding-right: 0px !important;
}

ベンとcjdに感謝します。

上記のコードは私にとってはうまくいくようです。

33
Tony S

これは、ブートストラップに報告された問題です： https://github.com/twbs/bootstrap/issues/9855

これは私の一時的なクイックフィックスであり、javascriptのみを使用して、上部の固定navbarを使用しても機能します。このスクリプトをページとともにロードします。

$(document.body)
.on('show.bs.modal', function () {
    if (this.clientHeight <= window.innerHeight) {
        return;
    }
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth()
    if (scrollbarWidth) {
        $(document.body).css('padding-right', scrollbarWidth);
        $('.navbar-fixed-top').css('padding-right', scrollbarWidth);    
    }
})
.on('hidden.bs.modal', function () {
    $(document.body).css('padding-right', 0);
    $('.navbar-fixed-top').css('padding-right', 0);
});

function getScrollBarWidth () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);

    return (w1 - w2);
};

これが実際の例です： http://jsbin.com/oHiPIJi/64

8
Agni Pradharma

Navbarを修正し、モーダルが開かれたときに本文を上にスクロールしたくない場合は、このスタイルを使用します

.modal-open {
    overflow: visible;
}
.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    padding-right:0px!important;
}
7
Calvin Grain

バージョン3.3.4および3.3.5では、このページのどの項目も機能しなかったため、このCSSを追加しても問題は解決しませんでした。

body {
padding-right:0px !important;
margin-right:0px !important;
}
6
Dizzle
$('body').on('show.bs.modal', function () {
    if ($("body").innerHeight() > $(window).height()) {
        $("body").css("margin-right", "17px");
    }
}); 

$('body').on('hidden.bs.modal', function (e) {
    $("body").css("margin-right", "0px");
});

この小さな修正は、モーダルが表示されているときにスクロールバーをシミュレートし、ボディに右マージンを追加します。

4
hect0r90

ページを右に移動させる問題を解決するため

html, body{
  padding: 0 !important;
}
4
Femi-oke Anthony

このソリューションは私のために働く!!!!

.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}


.modal-open[style] {
padding-right: 0px !important;
}
3
Jigar Bhatt

上記のどれも機能せず、他の研究時間もありません。しかし、次のコードはほんの少しのCSSで完璧に機能しました。上記はインラインスタイルのpadding：17pxを削除しません。 JSまたはjqueryでは、0パディングを追加できましたが、効果はありませんでした。

.modal-open {
  padding-right: 0px !important;
  overflow-y: scroll;
  width: 100%;
  display: block;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  outline: 0;
  padding-right: 0 !important;
}
3
Corey B
html, body{
    padding-right: 0px !important; 
    position: relative!important;
}

このコードを実際に試してみてください

2
beast.nil

私の場合、bodyタグはすでにoverflow:hiddenを指定しています。

モーダルダイアログが開くと、padding-right:17px;も本文に追加されます。

ここに私のコード

.modal-open {
  overflow: hidden!important;
  padding-right:0!important
}
2
KayJ

bootstrapモーダルが開くと、.modal-openクラスがbodyタグに設定されます。このタグでは、overflow：hiddenが設定されています。これを変更する必要があります。 CSSに次のコードを追加します。

<style>
body.modal-open {
    overflow: visible !important;
}
</style>

参照： Bootstrapモーダルバックグラウンドスクロールを上部に修正する方法

1
Sudhanshu sharma

Bootstrap 3.3.2の時点で、ダイアログが表示されたときにスクロールバーが削除され、Bootstrapがbody要素に右のパディングを追加して以前のスペースを補正するように見えますスクロールバーに表示されます。残念ながら、これは少なくとも最新バージョンのChrome、IE、Firefox、またはSafariでの画面シフトを妨げません。ここでの修正はこの問題を完全に修正するものではありませんが、ben.kaminskiの回答とcjd82187の回答の一部を組み合わせることで、CSSのみで問題を解決できます。

/* removes inline padding added by Boostrap that makes the screen shift left */
.modal-open[style] {
    padding-right: 0px !important;
}

/* keeps Bootstrap from removing the scrollbar if it's there */
.modal-open {
    overflow: auto;
}

Ben.kaminskiが述べたように、コードはTwitter Bootstrapに追加されたので、画面の下部にある場合はスクロールしてモーダルを表示できます。この機能を保持するには、CSSソリューションをメディアクエリでラップして、次のような大きなビューポートにのみ適用されるようにします。

@media (min-width: 992px) {         
    .modal-open[style] {
        padding-right: 0px !important;
    }

    .modal-open {
        overflow: auto;
    }   
}
1
clav

このシンプルなソリューションを実装しました

.modal-open {

  padding-right: 0 !important;

}

html {

  overflow-y: scroll !important;

}
1
harshal lonare

私のJqueryソリューション：

var nb = $('nav.navbar-fixed-top');
$('.modal')
    .on('show.bs.modal', function () {
        nb.width(nb.width());
    })
    .on('hidden.bs.modal', function () {
        nb.width(nb.width('auto'));
    });
0
Goloveichuk

私にとって最良の解決策は、この設定を使用することでした。ウェブとモバイルで機能します

.modal-open {
   overflow: hidden;
   position: absolute;
   width: 100%;
   height: 100%;
}
0
Bartando

誰かがreact-bootstrapを使用している場合、react-bootstrapはbody要素にインラインスタイルを適用してoverflowおよびpaddingを操作するため、ソリューションは少し複雑です。スタイル。これは、これらのインラインスタイルを!importantでオーバーライドする必要があることを意味します

body.modal-open {
  // enable below if you want to additionally allow scrolling with the modal displayed
  // overflow: auto !important;

  // prevent the additional padding from being applied
  padding: 0 !important;
}

NOTE：overflowのコメントを外してスクロールを有効にしない（つまり、スクロールバーを表示する）場合スタイルを選択すると、ページのコンテンツがスクロールバーの幅だけシフトして表示されます（スクロールバーが以前に表示されていた場合）。

0
pjs

Bootstrapバージョン3.2.0の場合、cssファイルの次の行はエラーを修正します。

.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
padding-right: 17px;
}

解決策が見つかりました こちら

0
captain theo

私のページには、モーダルが表示されたときにシフトしないように、Agni Pradharmaのコードの修正バージョンが必要でした。固定navヘッダーと、スクロールのあるページとないページがあります。デモはこちら： http://jsbin.com/gekenakoki/1/

私は両方のCSSを使用しました：

.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

およびスクリプト：

$(document.body)
.on('show.bs.modal', function () {
    if (this.clientHeight <= window.innerHeight) {
        return;
    }
    // Get scrollbar width
    var scrollbarWidth = getScrollBarWidth();
    if (scrollbarWidth) {
        $(document.body).css('padding-left', scrollbarWidth); 
    }
})
.on('hidden.bs.modal', function () {
    $(document.body).css('padding-left', 0);
});

function getScrollBarWidth () {
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);

    return (w1 - w2);
};
0
knighter