twitter-bootstrap 在固定位置叠加层内滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18609068/
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
Scroll within a fixed position overlay
提问by Mathijs Flietstra
JsBin. Click the buttons on the left. The first one is an example of an overlay that doesn't require a scroll (so it works perfectly), the second button does nothing, and the third button is the problem I'm describing. Note that I copied/pasted the ZenPen style before the main style in the css tab.
贾斌。单击左侧的按钮。第一个是不需要滚动的覆盖示例（因此它可以完美运行），第二个按钮什么也不做，第三个按钮是我正在描述的问题。请注意，我在 css 选项卡中的主要样式之前复制/粘贴了 ZenPen 样式。
I'm using Bootstrap 3.0 and ZenPen. The idea is that I have a menu on the left side of the screen where you can click a button to hide and show different 'applications' or overlays. These overlays are using position: fixed, but I can't do that for the ZenPen overlay or else I won't be able to scroll within it.
我正在使用 Bootstrap 3.0 和ZenPen。这个想法是我在屏幕左侧有一个菜单，您可以在其中单击一个按钮来隐藏和显示不同的“应用程序”或叠加层。这些叠加层正在使用position: fixed，但我无法为 ZenPen 叠加层执行此操作，否则我将无法在其中滚动。
If I change #wordInner { position: fixed;to #wordInner { position: absolute;instead, it will be able to scroll, but it won't take up the entire page (instead centered in the middle of a screen like a normal containerclass. In the JsBin, it's on position: absolute, but change it to see the problem I'm talking about.
如果我#wordInner { position: fixed;改为#wordInner { position: absolute;改为，它将能够滚动，但它不会占据整个页面（而是像普通container类一样居中在屏幕中间。在 JsBin 中，它是 on position: absolute，但更改它以查看我说的问题。
The logic behind my code is that I use a col-lg-12, and style that same div so that it will take the entire page (because a width: 100%obviously won't work.)
我的代码背后的逻辑是我使用col-lg-12, 并设置相同的 div 样式，以便它占据整个页面（因为 awidth: 100%显然不起作用。）
Main css:
主要CSS：
#wrap {
position: relative;
}
#main {
position: relative;
}
ZenPen's css (a link to the default ZenPen css):
ZenPen 的 css（指向默认ZenPen css的链接）：
#word {
overflow: hidden;
text-shadow: none;
}
#word b, #word strong {
color: #000;
}
#wordInner {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 5px;
/* because nav is about 100 px, zenpen's icon menu is about 65px */
padding-left: 165px;
}
#word {
overflow-y: scroll;
-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-ms-transition: all 600ms;
-o-transition: all 600ms;
transition: all 600ms;
}
#word section {
height: 100%;
margin: auto;
}
And relevant html (link to ZenPen html: ZenPen html):
和相关的 html（链接到 ZenPen html：ZenPen html）：
<div class="container" id="wrap">
<div class="container" id="main">
<!-- snip irrelevant html -->
</div>
</div>
<div class="container" id="apps">
<div class="row">
<div class="col-lg-12" id="appsInner">
<div><a href="#" id="close_apps">Close</a></div>
<input type="text" class="form-control" placeholder="Search here" />
</div>
</div>
</div>
<div class="container" id="word">
<div class="row">
<div class="col-lg-12 yin" id="wordInner" >
<div><a href="#" id="close_word">Close</a></div>
<!-- snip zenpen html -->
</div>
</div>
</div>
</div>
</div>
<nav>
<ul>
<li><a href="#" class="btn light" id="open_apps"><span class="entypo-search"></span></a><span class='button-text'>Apps</span></li>
<li><a href="#" class="btn red" id="home"><span class="entypo-home"></span></a><span class='button-text'>Home</span></li>
<li><a href="#" class="btn green" id="open_word"><span class="entypo-leaf"></span></a><span class='button-text'>Word</span></li>
</ul>
</nav>
回答by Mathijs Flietstra
You could set the overflow on html, bodyto overflow: hiddenand then set #wordInner { position: fixed; overflow: auto;. This will ensure that there is only one visible scrollbar on the right hand side of the page, and only when needed. If you need overflowset to visiblefor the other pages, you could set it using jQuery (since you are already using it anyway) when you open and close the #wordapp.
您可以将溢出设置html, body为overflow: hidden，然后设置#wordInner { position: fixed; overflow: auto;。这将确保页面右侧只有一个可见的滚动条，并且仅在需要时。如果您需要为其他页面overflow设置为visible，则可以在打开和关闭#word应用程序时使用 jQuery（因为您已经在使用它）进行设置。
Option 1 (using CSS only): jsBin
选项 1（仅使用 CSS）： jsBin
html, body
{
overflow: hidden;
}
#wordInner {
position: fixed;
overflow: auto;
...
}
Option 2 (using CSS and jQuery): jsBin
选项 2（使用 CSS 和 jQuery）： jsBin
CSS
CSS
#wordInner {
position: fixed;
overflow: auto;
...
}
jQuery
jQuery
$("#open_word").click(function(event) {
event.preventDefault();
$("html, body").css("overflow", "hidden");
$("#word").show();
});
$("#close_word").click(function(event) {
event.preventDefault();
$("html, body").css("overflow", "visible");
$("#word").hide();
});
