Bootstrap 3 模态触发并导致页面暂时向左移动/浏览器滚动条问题

Posted 2023-03-05

【中文标题】Bootstrap 3 模态触发并导致页面暂时向左移动/浏览器滚动条问题

【英文标题】：Bootstrap 3 modal fires and causes page to shift to the left momentarily / browser scroll bar problems

【发布时间】：2013-11-26 10:20:34

【问题描述】：

我正在使用 Bootstrap 3.1.0 开发一个网站。

您会注意到，当模式窗口打开时，浏览器滚动条会消失一瞬间，然后又回来了。关闭时也是如此。

我怎样才能让它在没有浏览器滚动条交互的情况下打开和关闭。我在堆栈上看到人们遇到问题的帖子，但我找不到针对我的问题的特定答案，所以如果其他人提出了这个请求并且有人知道它并想要将我链接到它，我将不胜感激它。在发布之前，我已经搜索了大约 2 个小时。

【问题讨论】：

显然这个问题在 Bootstrap 的 3.2.0 版本中得到了修复。

显然不是（2016 年）。未来的读者应该按投票对答案进行排序，因为接受的答案不是最佳答案。见this answer，也可能见this one

3.3.6 仍未修复，感谢@gibberish 的提醒！

2017 年工作 just fine。

【参考方案1】：

对于 Bootstrap 5，这对我有用

body.modal-open 
  overflow-y: inherit;

【参考方案2】：

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

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

【讨论】：

非常适合我，谢谢 :) 顺便说一句：您也可以使用 padding-right: 0; 而不是 padding-right: 0px 以获得最大效率

【参考方案3】：

我通过在我的 css 文件中添加以下代码解决了这个问题：

body 
    padding-right: 0px !important;

【参考方案4】：

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

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

</style>

参考：- How to fix Bootstrap modal background scroll to top

【参考方案5】：

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

就是这样。不需要其他任何东西，例如：在您的 body 中添加一些 .class 的 javascript 代码，然后添加 CSS 代码来设置它们的样式。

【参考方案6】：

以上所有方法都不起作用，其他时间也进行了研究。但是下面的代码只需要一点 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;

【讨论】：

这使得带有滚动条的页面在打开模式时具有第二个滚动条。如果您在打开的模式上有第二个模式，则在您关闭第二个模式后，第一个模式的滚动条将丢失。

【参考方案7】：

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

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

【参考方案8】：

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

.modal-open 

  padding-right: 0 !important;



html 

  overflow-y: scroll !important;

【参考方案9】：

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

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

找到解决方案here

【参考方案10】：

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

.modal 
 overflow-y: auto;


.modal-open 
 overflow: auto;



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

【参考方案11】：

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

【参考方案12】：

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

css 如果您有 nav-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;

如果您有默认导航栏，请使用此 css

body.modal-open-noscroll 

  margin-right: 0!important;
  overflow: hidden;

.modal-open-noscroll .navbar-default, .modal-open .navbar-default 

  margin-right: 0!important;

【讨论】：

为我工作，但我不得不将 margin-right 更改为 padding-right

@GhostRider：谢谢。我不得不碰碰边距。

另外一个用于固定顶部/固定底部修复，其他答案都不适用于这种情况。

@FutureReaders ben.kaminski's answer，下面有一个单行 css 解决方案，应该是公认的答案。

【参考方案13】：

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

试试这个代码 真的很有效

【讨论】：

虽然这不是修复它的最漂亮的方法，但它确实有效

只是为了解决一个模态问题，需要调整我的身体样式，这可能会干扰许多其他事情，但这对我有用 +1

【参考方案14】：

.modal 
    overflow-y: auto;


.modal-open 
    overflow: auto;


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

感谢本和 cjd。

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

【讨论】：

我认为这不是一个实际的答案，您发布了因为您还不能发表评论。但请耐心等待。

2016 年为我工作！谢谢

2017 和 Bootstrap 4 的细微变化仍然存在模态。这仍然可以解决问题，谢谢！

使用 bootstrap 4.2.1 这个问题仍然存在，这个答案修复了它。谢谢！

【参考方案15】：

解决页面右移问题

html, body
  padding: 0 !important;

【讨论】：

嗯，sn-p 实际上并没有显示任何东西。添加一些彩色块以显示您所提供的效果。

这对我有用——不是其他overflow-y:auto 回复。

也为我工作。其他解决方案没有。

【参考方案16】：

如果有人碰巧使用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 样式来启用滚动（即使滚动条可见），那么您的页面内容将显示为滚动条宽度（如果滚动条之前可见）。

【参考方案17】：

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

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

【参考方案18】：

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

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

【讨论】：

Margin-right 不应有固定的像素值，因为滚动条宽度因浏览器而异。

滚动条的宽度也会随着浏览器的缩放而变化。应该将此脚本与滚动条大小检测脚本结合使用，例如 this

【参考方案19】：

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

.modal-open 
    overflow: visible;

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

【参考方案20】：

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

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

我的代码在这里

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

【参考方案21】：

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

【参考方案22】：

我的页面需要 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);
;

【讨论】：

这不起作用。更改小提琴以触发垂直滚动并且仍然出现移位。

【参考方案23】：

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

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

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

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

希望这对某人有所帮助！

【讨论】：

我在 IE 中也遇​​到了同样的问题。它将添加一个填充正确的样式。这可能是因为我强制使用垂直滚动条。无论如何，这解决了它，谢谢！

感谢 Ben - 这也帮助了我！

这与上面的溢出：自动修复相结合对我有用。

2016 并且它有效（当您还考虑溢出时。）非常感谢！

这应该是 2020 年公认的答案。谢谢！

【参考方案24】：

这是一个已报告的引导问题：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

【讨论】：

在最新版本的 Bootstrap 上运行良好，在最新版本的 Chrome、Firefox 和 Opera 中测试。没用 Safari 或 IE 看​​。

正是我需要的。那个和这个：.modal overflow: auto; .modal-open overflow: auto; .modal-open[style] padding-right: 0px !important; 我试图从另一个模态中触发一个模态，并且班次加倍。感谢您的提示。

【参考方案25】：

.modal 
 overflow-y: auto;


.modal-open 
 overflow: auto;

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

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

【讨论】：

您可能希望仅在桌面媒体查询中包含该 CSS，以便在移动设备上使用更好的 boostrap 3 样式。

页面现在不会向左移动，但现在我们有更多的垂直滚动条！！！。

有效，但添加了第二个滚动条。

完美。快捷方便。谢谢

还添加填充，.modal-open overflow: auto; padding-right: 0px !important; 正如@ben.kaminski 所说，这完全摆脱了左移问题。希望有所帮助。