twitter-bootstrap 为什么在这个 Bootstrap 3.0 Modal 演示中会出现第二个垂直滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17666543/
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
Why does a second vertical scroll bar appear in this Bootstrap 3.0 Modal demo?
提问by Eric
Scroll down a bit on this Bootstrap 3.0 (WIP) page to the 'Launch Demo Modal'.
在此 Bootstrap 3.0 (WIP) 页面上向下滚动到“Launch Demo Modal”。
http://bs3.codersgrid.com/javascript/#modals
http://bs3.codersgrid.com/javascript/#modals
Notice a second vertical scroll bar appears. Why?
注意出现了第二个垂直滚动条。为什么？
回答by Brian
Because of the CSS style being applied to the element:
由于应用于元素的 CSS 样式：
.modal {
bottom: 0;
display: none;
left: 0;
overflow-x: auto;
overflow-y: scroll; /* <--- this guy right here */
position: fixed;
right: 0;
top: 0;
z-index: 1040;
}
Explicitly setting an overflow property to scrollwill cause the browser to display a scrollbar whether there is overflow or not.
显式设置溢出属性scroll将导致浏览器无论是否溢出都显示滚动条。
回答by Mark Overton
Completely remove the html tag from your style sheet. This will fix it.
从样式表中完全删除 html 标记。这将修复它。
回答by Walky Toki
/*remove double scrollbar*/
body.modal-open { overflow: hidden!important; }
回答by Pavel Kenarov
I tried each example that I found from stackoverflow and finally this is my solution:
我尝试了从 stackoverflow 找到的每个示例，最后这是我的解决方案：
$(function(){
$(document.body).on("show.bs.modal", function () {
$(window.document).find("html").addClass("modal-open");
$(window.document).find("div.wrapper").css({"margin-right":"17px"});
});
$(document.body).on("hide.bs.modal", function () {
$(window.document).find("html").removeClass("modal-open");
$(window.document).find("div.wrapper").removeAttr("style");
});
});
$(function(){
$(document.body).on("show.bs.modal", function () {
$(document.body).addClass("modal-open");
});
$(document.body).on("hide.bs.modal", function () {
$(document.body).removeClass("modal-open");
});
});
