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

我正在使用 Bootstrap 3.1.0建立一个网站。

当模态窗口打开时，您会注意到浏览器滚动条只消失了一瞬间，然后又回来了。你关上它的时候也是一样的。

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

80362 次浏览
小开 
.modal {
overflow-y: auto;
}


.modal-open {
overflow: auto;
}

会处理掉的。这是为了使模态工作更响应，所以你可以向下滚动，看到一个模态，如果屏幕太短。它还可以在模态显示时阻止背景滚动。如果你不需要这个功能，你可以用我发布的 css。

更多信息: 他们正在设置。Mode-open 在主体上，它防止主体上的所有滚动并隐藏主体滚动条。然后，当模态出现的时候，它有占据整个屏幕的黑色背景，并且有溢出的 y: 轴滚动迫使滚动条回来，所以如果扩展的模态通过屏幕底部，你仍然可以滚动黑色背景并看到其余部分。

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

这个小修复程序在显示模态时模拟滚动条，在主体部分添加右边距。

小开

这是向引导程序报告的一个问题: 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

小开

修复左移问题很容易完成单独使用 CSS。

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

您只是覆盖了代码中存在的内联样式。我正在使用我的 WordPress 构建和内联风格正在应用到身体。就像这样:

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

希望这对谁有帮助！

小开

我的页面需要一个修改版本的 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);
};
小开
最佳答案

这是我在 Github 中搜索这个问题时发现的，对我来说它工作得很好

约翰逊:

    $(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 如果你有 导航固定顶和 导航杆固定底座导航杆固定底座导航杆，使用这个 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;
}
小开 
.modal {
overflow-y: auto;
}


.modal-open {
overflow: auto;
}


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

多亏了 Ben 和 CJD。

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

小开

从 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 提到的，代码被添加到 Bootstrap 中，这样当模式超出屏幕底部时，你就可以滚动将其显示出来。为了保留这个功能，你可以将 CSS 解决方案封装在一个媒体查询中，这样它就只适用于大的视图，比如:

@media (min-width: 992px) {
.modal-open[style] {
padding-right: 0px !important;
}


.modal-open {
overflow: auto;
}
}
小开

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

当模态对话框打开时，它也将 padding-right:17px;添加到主体。

这是我的代码

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

如果您有固定的导航栏，并不想滚动体顶部时，模态是打开使用这种风格

.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;
}
小开

如果有人碰巧在使用 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样式的注释来启用滚动(即使滚动条可见) ，那么您的页面内容将看起来通过滚动条宽度移动(如果滚动条以前是可见的，那么现在是可见的)。

小开

解决页面向右移动的问题

html, body{
padding: 0 !important;
}

小开 

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

试试这个代码 真的起作用了

小开

当引导模式打开时。Mode-open 类被设置为 body 标记。在此标记溢出中: 已设置了 hide。我们得改变这一切。在 CSS 中添加以下代码。

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

参考资料:-如何修复引导模式背景滚动到顶部

小开

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




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

对于 Bootstrap 3.2.0版本，css 文件中的这行代码修复了错误:

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

解决方案发现 给你

小开

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

.modal-open {


padding-right: 0 !important;


}


html {


overflow-y: scroll !important;


}
小开

对我来说最好的解决方案是使用这个设置，它适用于网络和手机

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

以上所有人都没有工作，其他人的研究时间也很长。但是下面的代码只需要一点 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;
}
小开

对于 引导程序 -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 代码来设计它们的样式。

小开

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

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

4号引导程序出了点问题。我有 html { overflow-y: scroll; }，我认为这是一个问题，但后添加 .modal-open[style] { padding-right: 0px !important; }到我的本地 css 文件，一切工作完美！

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

小开

对于 Bootstrap 5来说，这对我很有用

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

提交答案