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.

对于我的注册域名,我几乎已经完成了一个简单的2页网站。不幸的是,我有一个小问题,我似乎无法修复:Twitter Bootstrap模式打开和关闭时的跳跃标题。在移动设备上没有问题。此问题仅发生在台式机和笔记本电脑等较大的视口中。

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.

在Web浏览器中打开http://www.domains.cloudlabz.nl/domains,并确保通过降低视口高度来获得垂直滚动条。

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

检查下图(Opera,Safari,Firefox和Chrome中的结果相同):

Jumping header issue http://i58.tinypic.com/opp99l.gif

跳头问题http://i58.tinypic.com/opp99l.gif

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.

我注意到跳转标题只发生在固定位置元素上,例如我的标题(添加了Bootstrap类navbar-fixed-top)。它甚至出现在Bootstrap网站上:http://getbootstrap.com/javascripts。转到桌面上的“Modals> Optional Sizes”区域,然后单击其中一个按钮。你会看到右侧菜单来回跳跃。

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.

当模态打开时,类.modal-open被添加到body元素中(感谢指出@Pred)。它在右侧添加了15px的填充,其宽度与滚动条装订线的宽度相同。这可以防止身体来回跳跃。

Unfortunately this padding apparently does not apply to fixed elements.

不幸的是,这种填充显然不适用于固定元素。

12 个解决方案

#1

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:

Bootstrap添加class =“modal-open”和padding-right:15px;显示模态时的身体。要删除右移并保持滚动条将其添加到您的CSS:

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

Tried in bootstrap 3.3.4

尝试在bootstrap 3.3.4

#2

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.

我似乎找到了一个快速修复我的问题。它使用一段javascript为标题添加额外的样式(15px padding-right)以防止它跳转。这可能不是最好的解决方案,但现在它工作得很好。

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

由于小于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>

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

如果你知道一个更好的解决方案(最好只有CSS3),请告诉我。感谢您的帮助!

#3

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!

当模态打开时,“模态打开”类被添加到隐藏溢出的HTML 元素中。您可以通过使用overflow:inherit覆盖“modal-open”类来更改此设置。这将使滚动条保持在视图中,就像模式关闭时一样。请记住,只要在页面上打开任何模态,这将更改溢出选项。希望这可以帮助。祝你好运!

#4

All this happens because of this part of code in bootstrap.js:

所有这些都是因为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)
}

That annoying problem happens in Firefox 32.0 (Gecko/20100101) and Chromium Version 37.0.2062.94 (Webkit 537.36) (Ubuntu 14.04). Not happens in QupZilla Version 1.6.6 (WebKit 537.21).

这个恼人的问题发生在Firefox 32.0(Gecko / 20100101)和Chromium Version 37.0.2062.94(Webkit 537.36)(Ubuntu 14.04)中。在QupZilla版本1.6.6(WebKit 537.21)中不会发生。

For me, the dirty fix is to comment the conditional line, after that it works in all browsers I tested (including some android's browsers).

对我来说,脏修复是评论条件行,之后它适用于我测试的所有浏览器(包括一些Android的浏览器)。

NOTE: if you comment that line, you should be careful with the size of your modals since bootstrap will not create enough space for the new scrollbar.

注意:如果您对该行进行注释,则应该小心模式的大小,因为bootstrap不会为新滚动条创建足够的空间。

Regards.

#5

As you usually put Bootstrap navbar as a direct child of the body container:

因为您通常将Bootstrap导航栏作为主体容器的直接子项:

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

You can use the body padding-right value, calculated in the Bootstrap core code to prevent it from "jumping" when opening a modal window, to fix the navbar issue as well . A pure CSS solution is below:

您可以使用在Bootstrap核心代码中计算的body padding-right值来防止它在打开模式窗口时“跳跃”,以修复导航栏问题。纯CSS解决方案如下:

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

Easy as that.

很简单。

#6

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 -

只有当您知道页面内容比视口长时(因此任何长滚动页面),此方法才有效。您只需将以下内容添加到CSS中即可 -

html {
  overflow-y: scroll;
}

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

#7

Another solution is to add:

另一个解决方案是添加:

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

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

防止其内容跳跃。再一次,这很容易。

#8

I came around same issue and I solved it as follows

我遇到了同样的问题,我解决了如下问题

just add

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

#9

I manually change bootstap.js:

我手动更改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', '')
  }

#10

I have a structure:

我有一个结构:

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

I'm using this CSS:

我正在使用这个CSS:

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

#11

Add the following to your CSS:

将以下内容添加到CSS中:

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

#12

For Bootstrap 4 sticky-top, use the following snippet. Tested all the CSS solutions on this page but none worked for Bootstrap 4.

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

My page design was as follows

我的页面设计如下

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

#1