Question

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

当模态窗口打开时，您会注意到浏览器滚动条只会瞬间消失，然后返回。关闭它时也会这样做。

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

Answer 1

.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}

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

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

Answer 2

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

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

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

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

希望这有助于某人！

Answer 3

.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

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

感谢ben和cjd。

以上代码似乎对我有用。

Answer 4

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

如果你有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;
}

Answer 5

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

Answer 6

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

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

Answer 7

本页面中没有任何项目在3.3.4和3.3.5版本中适用于我添加这个CSS已经解决了我的问题。

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

Answer 8

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

这个小修正模拟了模态显示时的滚动条，为身体添加了边距。

Answer 9

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

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

Answer 10

我通过在CSS文件中添加以下代码来解决此问题：

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

Answer 11

解决导致页面向右移动的问题

html, body{
  padding: 0 !important;
}

Answer 12

以上方法均无济于事，还需要花费大量时间进行研究。但是，以下代码只需要一点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;
}

Answer 13

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

.modal {
 overflow-y: auto;
}

.modal-open {
 overflow: auto;
}


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

Answer 14

＆＃13;

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

＆＃13;

试试这段代码它确实在工作

Answer 15

就我而言，body标签已指定overflow:hidden。

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

我的代码在这里

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

Answer 16

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

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

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

Answer 17

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

.modal-open {

  padding-right: 0 !important;

}

html {

  overflow-y: scroll !important;

}

Answer 18

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

Answer 19

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

Answer 20

如果有人碰巧使用react-bootstrap，解决方案会稍微复杂一点，因为react-bootstrap会将内联样式应用于body元素来操纵overflow和{{ 1}}样式。这意味着您必须使用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; }样式来启用滚动（即使滚动条可见），那么您的页面内容将显示为已移位滚动条宽度超过（如果滚动条以前是可见的）。

Answer 21

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

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

找到解决方案here

Answer 22

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

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

Answer 23

对于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代码来设置样式。

Answer 24

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

Answer 25

对于 Bootstrap 5，这对我有用

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

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

25 个答案: