html - Bootstrap 3 modal fires and causes page to shift to the left momentarily / browser scroll bar problems

Question

I am working on a site using Bootstrap 3.1.0.

You'll notice when the modal window opens, the browser scroll bar just disappears for a split second, then comes back. It does the same when you close it.

How can I make it so that it just open and closes with no browser scroll bar interaction. I have seen posts on stack where people were having problems, but I can't find an answer specific to my problem, so if someone else has made this request and someone knows about it and wants to link me to it, I'd appreciate it. I've searched for about 2 hours for this before posting up.

score 93 · Accepted Answer

.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}

会摆脱它。添加此功能是为了使模态框响应更快，因此如果屏幕太短，您可以向下滚动并查看模态框。当模式启动时，它还会阻止背景滚动。如果您不需要该功能，则可以使用我发布的那个 css。

更多信息：他们在 body 上设置 .modal-open ，这会阻止 body 上的所有滚动并隐藏 body 滚动条。然后，当模态出现时，它具有占据整个屏幕的深色背景，并且具有溢出-y：滚动，它强制滚动条返回，因此如果模态扩展通过屏幕底部，您仍然可以滚动黑暗的背景，看看它的其余部分。

score 76 · Accepted Answer

仅使用 CSS 即可轻松解决左移问题。

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

您只是覆盖了代码中存在的内联样式。我在 WordPress 构建中使用我的，并且内联样式被应用于正文。看起来像这样：

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

希望这对某人有帮助！

score 39 · Accepted Answer

.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

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

感谢本和 cjd。

上面的代码似乎对我有用。

score 22 · Accepted Answer

这是我在 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");
    });
})

如果您有nav-fixed-top和navbar-fixed-bottom ，则css使用此 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;
}

score 8 · Accepted Answer

这是一个报告的引导问题：https ://github.com/twbs/bootstrap/issues/9855

这是我的临时快速修复，它也可以使用固定顶部导航栏，仅使用 javascript。将此脚本与您的页面一起加载。

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

score 8 · Accepted Answer

在 3.3.4 和 3.3.5 版本中，此页面中的所有项目都不适用于我添加此 CSS 为我解决了问题。

body {
padding-right:0px !important;
margin-right:0px !important;
}

score 7 · Accepted Answer

如果您已修复导航栏并且不想在打开模式时将正文滚动到顶部，请使用此样式

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

score 6 · Accepted Answer

6

解决导致页面右移的问题

html, body{
  padding: 0 !important;
}

于 2016-07-21T15:10:09.453 回答

score 4 · Accepted Answer

$('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");
});

这个小修复模拟了显示模式时的滚动条，为正文添加了一个边距。

score 4 · Accepted Answer

以上都没有工作和其他几个小时的研究。但是下面的代码只需要一点 CSS 就可以完美运行。以上不会删除内联样式填充：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;
}

score 4 · Accepted Answer

我在使用 Bootstrap 4 时遇到了这个问题。我有html { overflow-y: scroll; }并且我认为这是一个问题，但是在添加.modal-open[style] { padding-right: 0px !important; }到我的本地 css 文件后，一切正常！

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

score 4 · Accepted Answer

这个解决方案对我有用！！！！

.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}


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

score 4 · Accepted Answer

我通过在我的 css 文件中添加此代码来解决此问题：

body {
    padding-right: 0px !important;
}

score 3 · Accepted Answer

html, body{
    padding-right: 0px !important; 
    position: relative!important;
}

试试这段代码真的很有效

score 2 · Accepted Answer

在我的例子中，body 标签已经指定了overflow:hidden.

当模态对话框打开时，它也会添加padding-right:17px;到正文中。

我的代码在这里

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

我的页面需要 Agni Pradharma 代码的修改版本，以防止它在显示模式时发生偏移。我有一个固定的导航标题和一些带有滚动的页面，有些没有。在这里演示：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);
};

score 1 · Accepted Answer

实施了这个简单的解决方案

.modal-open {

  padding-right: 0 !important;

}

html {

  overflow-y: scroll !important;

}

score 1 · Accepted Answer

对于Bootstrap-4.3.x，使用以下 css：

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

/* if you have .navbar in your page then add padding-right for your .navbar (default is 16px) */
.modal-open .navbar {
    padding-right: 16px !important;
}

而已。没有其他需要，例如：添加一些 JavaScript 代码.class，body然后添加 CSS 代码来设置它们的样式。

score 1 · Accepted Answer

当引导模式打开时， .modal-open 类被设置为 body 标签。在此标签中设置了溢出：隐藏。我们必须改变这一点。在您的 CSS 中添加以下代码。

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

参考：-如何修复 Bootstrap 模式背景滚动到顶部

score 0 · Accepted Answer

对于 Bootstrap 版本 3.2.0，css 文件中的这一行填充修复了错误：

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

在这里找到的解决方案

score 0 · Accepted Answer

如果有人碰巧使用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;
}

注意：如果您没有通过取消注释overflow样式来启用滚动（即使滚动条可见），那么您的页面内容将显示为按滚动条宽度移动（如果滚动条以前可见）。

score 0 · Accepted Answer

对我来说最好的解决方案是使用此设置。它适用于网络和移动设备

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

score 0 · Accepted Answer

0

对于 Bootstrap 5，这对我有用

body.modal-open {
  overflow-y: inherit;
}

于 2021-06-19T11:35:26.227 回答

score 0 · Accepted Answer

我的 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'));
    });

html - Bootstrap 3 modal fires and causes page to shift to the left momentarily / browser scroll bar problems

25 回答 25

Related

Reference