I am almost done with a simple 2-page website for my registered domain names. Unfortunately I have one small issue I can't seem to fix: a jumpy header when a Twitter Bootstrap modal opens and closes. On mobile devices there's no problem. The problem only occurs in larger viewports like desktops and laptops.

How to recreate

Open http://www.domains.cloudlabz.nl/domains in a webbrowser and make sure you get a vertical scrollbar by lowering the viewport height.
Click on one of the blue 'more info' buttons.
Notice the jumping header and disappearing scrollbar once the modal opens.
Close the modal and notice the header jumping back and the scrollbar reappearing.

Check the following image (same result in Opera, Safari, Firefox and Chrome):

What I'd like

I'd like the header to stop jumping when opening/closing a modal. The fact the scrollbar disappears is not an issue. Actually, I would like it to stay like that.

Update

I noticed the jumping header only occurs with fixed position elements such as my header (added Bootstrap class navbar-fixed-top). It even occurs on the Bootstrap website itself: http://getbootstrap.com/javascripts. Go to the 'Modals > Optional Sizes' area on a desktop and click one of the buttons. You'll see the right side menu jumping back and forth.

When the modal opens, the class .modal-open is added to the body element (thanks for pointing that out @Pred). It adds a padding of 15px to the right, which is the same width as the scrollbar gutter. This prevents the body from jumping back and forth.

Unfortunately this padding apparently does not apply to fixed elements.

标签： css twitter-bootstrap dialog modal-dialog scrollbar

13条回答

三岁会撩人

2楼-- · 2020-04-02 07:40

I seemed to have found a quick fix for my issue. It uses a piece of javascript to add extra style to the header (15px padding-right) to prevent it from jumping. This might not be the best solution but for now it works just fine.

Since there were no issues on viewports smaller than 768px (mobile) this piece of code only adds the extra 15px to larger viewports such as desktops and laptops

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

If you know a better solution (preferably CSS3 only), please let me know. Thanks for all the help!

0人赞添加讨论(0) 举报

趁早两清

3楼-- · 2020-04-02 07:40

When the modal opens, the "modal-open" class is added to the HTML <body> element which hides overflow. You can change this by over-writing the "modal-open" class with overflow: inherit. This will keep the scrollbar in view, just as it is when the modal is closed. Keep in mind that this will change the overflow option whenever any modal is opened on the page. Hope this helps. Good luck!

0人赞添加讨论(0) 举报

别忘想泡老子

4楼-- · 2020-04-02 07:45

Another solution is to add:

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

to prevent its content from jumping. Again, easy as that.

0人赞添加讨论(0) 举报

Viruses.

5楼-- · 2020-04-02 07:48

I manually change bootstap.js:

before change

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', '')
  }

after change:

  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人赞添加讨论(0) 举报

地球回转人心会变

6楼-- · 2020-04-02 07:53

Bootstrap adds class="modal-open" and padding-right: 15px; to body when the modal is shown. To remove the right shift and keep the scroll bar add this to your css:

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

Tried in bootstrap 3.3.4

0人赞添加讨论(0) 举报

叛逆

7楼-- · 2020-04-02 07:53

This one only works if you know your page content is longer than the viewport (so any long scrolling page). You can just add the following to your CSS -

html {
  overflow-y: scroll;
}

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

0人赞添加讨论(0) 举报

Twitter Bootstrap modal opening/closing causes fix

How to recreate

What I'd like

Update

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间