web-dev-qa-db-ja.com

Twitter Bootstrapモーダル開閉により、固定ヘッダーがジャンプします

登録したドメイン名の簡単な2ページのWebサイトはほぼ完成です。残念ながら、修正できない小さな問題が1つあります。それは、Twitter Bootstrapモーダルが開閉するときのヘッダーのジャンプです。モバイルデバイスでは問題ありません。この問題は、次のような大きなビューポートでのみ発生します。デスクトップとラップトップ。

再現する方法

  1. ウェブブラウザで http://www.domains.cloudlabz.nl/domains を開き、垂直スクロールバーが表示されることを確認しますビューポートの高さを下げることによって。
  2. 青い「詳細」ボタンの1つをクリックします。
  3. モーダルが開くと、ヘッダーがジャンプし、スクロールバーが消えることに注意してください。
  4. モーダルを閉じて、ヘッダーが跳ね返り、スクロールバーが再び表示されることを確認します。

次の画像を確認してください（Opera、Safari、Firefox、Chromeでも同じ結果です）。

Jumping header issue

欲しいもの

モーダルを開閉するときにヘッダーのジャンプを停止したいのですが。スクロールバーが消えるという事実は問題ではありません。実はそのままにしておきたいです。

更新

ジャンプヘッダーは、ヘッダーなどの固定位置要素でのみ発生することに気付きました（Bootstrap class navbar-fixed-topを追加）。Bootstrapウェブサイト自体： http://getbootstrap.com/javascripts 。デスクトップの[モーダル]> [オプションのサイズ]領域に移動し、ボタンの1つをクリックします。右側のメニューがジャンプして戻ります。前後に。

モーダルが開くと、クラス.modal-openがbody要素に追加されます（@Predを指摘してくれてありがとう）。右側に15pxのパディングが追加されます。これは、スクロールバーのガターと同じ幅です。これにより、体が前後にジャンプするのを防ぎます。

残念ながら、このパディングは明らかに固定要素には適用されません。

csstwitter-bootstrapdialogmodal-dialogscrollbar
12
user3879583

私は自分の問題の迅速な解決策を見つけたようです。 JavaScriptを使用して、ヘッダーにスタイルを追加し（15pxのパディング-右）、ジャンプしないようにします。これは最善の解決策ではないかもしれませんが、今のところは問題なく機能します。

768px（モバイル）より小さいビューポートでは問題がなかったため、このコードはデスクトップやラップトップなどの大きなビューポートに15pxを追加するだけです。

<script>

    $(document).ready(function(){

        // Dirty fix for jumping scrollbar when modal opens

        $('#requestModal').on('show.bs.modal', function (e) {
            if ($(window).width() > 768) {
                $(".navbar-default").css("padding-right","15px");
            }
        });

        $('#requestModal').on('hide.bs.modal', function (e) {
            if ($(window).width() > 768) {
                $(".navbar-default").css("padding-right","0px");
            }
        });

    });

</script>

より良い解決策（できればCSS3のみ）をご存知の場合は、お知らせください。すべての助けをありがとう！

12
user3879583

モーダルが表示されると、Bootstrapはclass="modal-open"とpadding-right: 15px;をbodyに追加します。右シフトを削除してスクロールバーを維持するには、これをcssに追加します。

body.modal-open {
  overflow: inherit;
  padding-right: 0 !important;
}

bootstrap 3.3.4で試してみました

26
ti6on

モーダルが開くと、「modal-open」クラスがHTML <body>要素に追加され、オーバーフローが非表示になります。これは、「modal-open」クラスをoverflow: inheritで上書きすることで変更できます。これにより、モーダルが閉じているときと同じように、スクロールバーが表示されたままになります。これにより、ページでモーダルが開かれるたびにオーバーフローオプションが変更されることに注意してください。お役に立てれば。幸運を！

4
Pred

通常、Bootstrap navbarをbodyコンテナの直接の子として配置します。

<body>
  <nav class="navbar navbar-fixed-top">...</nav>
</body>

Bootstrapコアコードで計算されたbodypadding-right値を使用して、モーダルウィンドウを開いたときに「ジャンプ」しないようにし、navbarの問題も修正できます。純粋なCSSソリューションは以下のとおりです。

.navbar-fixed-top {
  padding-right: inherit;
}

そのように簡単です。

4
sdvnksv

これはすべて、bootstrap.jsのコードのこの部分が原因で発生します。

Modal.prototype.setScrollbar = function () {
    var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
    if (this.scrollbarWidth) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
}

この厄介な問題は、Firefox 32.0（Gecko/20100101）およびChromiumバージョン37.0.2062.94（Webkit 537.36）（Ubuntu 14.04）で発生します。 QupZillaバージョン1.6.6（WebKit 537.21）では発生しません。

私にとって、汚い修正は条件付きの行にコメントすることです。その後、テストしたすべてのブラウザー（一部のAndroidのブラウザーを含む）で機能します。

注：その行にコメントする場合は、モーダルのサイズに注意する必要があります。bootstrapは、新しいスクロールバー用の十分なスペースを作成しないためです。

よろしく。

4
Rafael Minguet García

別の解決策は、次を追加することです。

.modal-open .navbar-fixed-top {
  overflow-y: scroll;
}

コンテンツがジャンプするのを防ぐため。繰り返しますが、そのように簡単です。

3
sdvnksv

これは、ページのコンテンツがビューポートよりも長いことがわかっている場合にのみ機能します（つまり、長いスクロールページ）。 CSSに以下を追加するだけです-

html {
  overflow-y: scroll;
}

.modal-open {
  padding-right: 0!important;
}
3
davemcmillan

同じ問題が発生し、次のように解決しました

追加するだけ

body.modal-open {
  position: fixed;
  overflow: scroll;
  width: 100%;
  padding-right: 0!important;
}
2
murli2308

私の場合、コメントを追加するか、これらの2行を削除することで解決できますright: 0;およびleft: 0; bootstrap.cssファイル内：

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  /* right: 0;
  left: 0; */
  z-index: 1030;
}

注：私はbootstrap v3.3.7を使用します

0
paknefia

CSSに以下を追加します。

body {
  overflow: inherit;
  padding-right: 0 !important;
}
0
Usama Khalid Man

Bootstap.jsを手動で変更します。

変更前

Modal.prototype.setScrollbar = function () {
    var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
    if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
  }

  Modal.prototype.resetScrollbar = function () {
    this.$body.css('padding-right', '')
  }

変更後：

  Modal.prototype.setScrollbar = function () {
    var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10)
    var headerPad = parseInt(($('.navbar-fixed-top').css('padding-right') || 0), 10)
    if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth)
    if (this.bodyIsOverflowing) $('.navbar-fixed-top').css('padding-right', headerPad + this.scrollbarWidth)
  }

  Modal.prototype.resetScrollbar = function () {
    this.$body.css('padding-right', '')
    $('.navbar-fixed-top').css('padding-right', '')
  }
0
Oleg Belotelov

Bootstrap 4 sticky-topの場合、次のスニペットを使用します。このページのすべてのCSSソリューションをテストしましたが、Bootstrap 4では機能しませんでした。

<script type="text/javascript">

    $('body').on('show.bs.modal', function () {
        $('.sticky-top').css('margin-left', '-=0px');
    });

    $('body').on('hidden.bs.modal', function () {
        $('.sticky-top').css('margin-left', 'auto');
    });

</script>

私のページデザインは以下の通りです

<header class="container">
    <div class="row">

    </div>
</header>

<div class="container sticky-top">
    <nav class="navbar navbar-expand-lg">
        This div jumped/shifted 17px to the right when opening a modal
    </nav>
</div>
0
VDWWD

私は構造を持っています：

<html>
<body>
  <nav class="navbar navbar-fixed-top">...</nav>
  <section>
    <div class="container">...</div>
  </section>
  <section>
    <div class="container">...</div>
  </section>
  <footer>...</foter>
</body>
</html>

私はこのCSSを使用しています：

body.modal-open {padding-right: 0 !important}
body.modal-open nav,
body.modal-open section,
body.modal-open footer {padding-right: 17px !important}
0
Neash