我正在使用Bootstrap 3.1.0在一个站点上工作。
你会注意到当模态窗口打开时，浏览器滚动条会暂时消失，然后返回。关闭它时也会这样做。
我怎样才能使它只是打开和关闭而没有浏览器滚动条交互。我已经看到人们遇到问题的堆栈上的帖子，但我找不到特定于我的问题的答案，所以如果其他人提出了这个请求并且有人知道并且想要将我链接到它，我会很感激它。在发布之前我已经搜索了大约2个小时。
这是我在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;
}
这个解决方案对我有用!!!!
.modal {
overflow-y: auto;
}
.modal-open {
overflow: auto;
}
.modal-open[style] {
padding-right: 0px !important;
}
以上都没有工作和其他时间的研究。但是下面的代码只用了一点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;
}
就我而言，body标签已经指定了overflow:hidden。
当模态对话框打开时，它还会将padding-right:17px;添加到body。
我的代码在这里
.modal-open {
overflow: hidden!important;
padding-right:0!important
}
html, body{
padding-right: 0px !important;
position: relative!important;
}试试这段代码真的很有效
从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;
}
}
实施这个简单的解决方案
.modal-open {
padding-right: 0 !important;
}
html {
overflow-y: scroll !important;
}
当bootstrap模式打开时，.modal-open类设置为body标签。在这个标签中溢出：隐藏设置。我们必须改变这一点。在CSS中添加以下代码。
<style>
body.modal-open {
overflow: visible !important;
}
</style>
我的页面需要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);
};
如果有人碰巧使用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样式来启用滚动（即使滚动条可见），那么您的页面内容将显示为通过滚动条宽度切换（如果滚动条以前是可见的）。
我的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'));
});
.modal {
overflow-y: auto;
}
.modal-open {
overflow: auto;
}
将摆脱它。添加它是为了使模态更加响应，因此如果屏幕太短，您可以向下滚动并查看模态。它还会阻止背景在模态启动时可滚动。如果您不需要该功能，那么您可以使用我发布的那个css。
更多信息：他们在身体上设置.modal-open，这可以防止身体上的所有滚动并隐藏身体滚动条。然后，当模态出现时，它具有占据整个屏幕的深色背景，并且具有溢出-y：滚动，这迫使滚动条返回，因此如果模态扩展通过屏幕的底部，您仍然可以滚动黑暗的背景，看到其余的。
对于Bootstrap版本3.2.0，这行css文件填充修复错误：
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
padding-right: 17px;
}
解决方案找到了here
对我来说最好的解决方案是使用此设置。它适用于网络和移动
.modal-open {
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
}
只使用CSS就可以轻松解决左移问题。
.modal-open[style] {
padding-right: 0px !important;
}
您只是覆盖了代码中存在的内联样式。我正在使用我的WordPress构建，并且内联样式正在应用于正文。看起来像这样：
<body class="home blog logged-in modal-open" style="padding-right: 15px;">
希望这有助于某人！
.modal {
overflow-y: auto;
}
.modal-open {
overflow: auto;
}
.modal-open[style] {
padding-right: 0px !important;
}
感谢ben和cjd。
上面的代码似乎对我有用。
这是bootstrap报告的问题：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
如果你有固定的导航栏，并且不想在打开模态时将主体滚动到顶部，请使用此样式
.modal-open {
overflow: visible;
}
.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
padding-right:0px!important;
}
在3.3.4版本和3.3.5版本中，此页面中没有任何项目适用于我。添加此CSS已解决了我的问题。
body {
padding-right:0px !important;
margin-right:0px !important;
}
$('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");
});
当显示模态时，此小修复模拟滚动条，向主体添加边距。
解决导致页面向右移动的问题
html, body{
padding: 0 !important;
}