Html Bootstrap 3 模式触发并导致页面暂时向左移动/浏览器滚动条问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19960162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 modal fires and causes page to shift to the left momentarily / browser scroll bar problems
提问by Daniel White
I am working on a site using Bootstrap 3.1.0.
我正在使用 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.
我怎样才能让它在没有浏览器滚动条交互的情况下打开和关闭。我在堆栈上看到有人遇到问题的帖子，但我找不到特定于我的问题的答案，所以如果其他人提出了这个请求并且有人知道它并希望将我链接到它，我会很感激它。在发布之前，我已经搜索了大约 2 个小时。
采纳答案by user4314713
this is what i found in github when i search about this problem and for me it works fine
这是我在 github 中搜索这个问题时发现的，对我来说它工作正常
js:
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");
});
})
cssuse this css if you have nav-fixed-topand navbar-fixed-bottom:
如果您有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;
}
or user this css if you have 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;
}
回答by cjd82187
.modal {
overflow-y: auto;
}
.modal-open {
overflow: auto;
}
Will get rid of it. This was added to make the modals work more responsively, so you could scroll down and see a modal if the screen was too short. It also stops the background from being scrollable while a modal is up. If you don't need that functionality, then you can use that css I posted.
会摆脱它。添加此功能是为了使模态的工作更具响应性，因此如果屏幕太短，您可以向下滚动并查看模态。它还可以在模式启动时阻止背景滚动。如果您不需要该功能，那么您可以使用我发布的那个 css。
Some more info: They are setting .modal-open on the body, which prevents all scrolling on the body and hides the body scrollbar. Then, when the modal comes up it has the dark background that takes up the whole screen, and that has overflow-y: scroll which forces the scrollbar to come back so if the modal extended passed the bottom of the screen you can still scroll the dark background and see the rest of it.
更多信息：他们在身体上设置 .modal-open ，这可以防止身体上的所有滚动并隐藏身体滚动条。然后，当模态出现时，它具有占据整个屏幕的深色背景，并且具有溢出-y：滚动，这会强制滚动条返回，因此如果模态扩展通过屏幕底部，您仍然可以滚动黑暗的背景，看看它的其余部分。
回答by ben.kaminski
Fixing the shifting left issue is easily done using CSS alone.
单独使用 CSS 可以轻松解决左移问题。
.modal-open[style] {
padding-right: 0px !important;
}
You're just overwriting an inline style that exists in the code. I am using mine in a WordPress build and the inline style was being applied to the body. Looked like this:
您只是覆盖了代码中存在的内联样式。我在 WordPress 版本中使用我的，并且将内联样式应用于正文。看起来像这样：
<body class="home blog logged-in modal-open" style="padding-right: 15px;">
Hope this helps someone!
希望这可以帮助某人！
回答by Tony S
.modal {
overflow-y: auto;
}
.modal-open {
overflow: auto;
}
.modal-open[style] {
padding-right: 0px !important;
}
Thanks to ben and cjd.
感谢本和 cjd。
The above code seems to work for me.
上面的代码似乎对我有用。
回答by Agni Pradharma
This is a reported issue to bootstrap: https://github.com/twbs/bootstrap/issues/9855
这是引导程序的报告问题：https: //github.com/twbs/bootstrap/issues/9855
And this is my temporary quick fix and it's also work using fixed top navbar, only using javascript. Load this script along with your page.
这是我的临时快速修复，它也可以使用固定的顶部导航栏，仅使用 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);
};
Here is the working example: http://jsbin.com/oHiPIJi/64
这是工作示例：http: //jsbin.com/oHiPIJi/64
回答by Calvin Grain
If you have fixed navbar and dont want to scroll body to top when modal is opened use this style
如果您有固定的导航栏并且不想在打开模态时将正文滚动到顶部，请使用此样式
.modal-open {
overflow: visible;
}
.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
padding-right:0px!important;
}
回答by Dizzle
None of the items in this page worked for me in version 3.3.4 and 3.3.5 Adding this CSS has solved the problem for me.
在 3.3.4 和 3.3.5 版本中，此页面中的所有项目均不适合我添加此 CSS 为我解决了问题。
body {
padding-right:0px !important;
margin-right:0px !important;
}
回答by Femi-oke Anthony
to solve the problem causing the page to shift to the right
解决导致页面右移的问题
html, body{
padding: 0 !important;
}回答by hect0r90
$('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");
});
This little fix simulates the scrollbar when the modal is shown, adding a margin-right to the body.
当显示模态时，这个小修复模拟滚动条，为正文添加边距。
回答by Corey B
None of the above worked and others hours of research.But the following code worked perfect with just a bit of CSS. The above would not remove inline style padding:17px; with JS or jquery, I could add 0 padding, but had no effect.
以上都没有奏效，还有其他几个小时的研究。但是下面的代码只需要一点 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;
}
