在固定位置叠加内滚动

Question

JsBin。单击左侧的按钮。第一个是不需要滚动的叠加的示例（因此它完美地工作），第二个按钮什么都不做，第三个按钮是我正在描述的问题。请注意，我在css选项卡中的主要样式之前复制/粘贴了ZenPen样式。

我正在使用Bootstrap 3.0和ZenPen。我的想法是，我在屏幕左侧有一个菜单，您可以单击按钮隐藏并显示不同的“应用程序”或叠加层。这些叠加层正在使用position: fixed，但我不能为ZenPen叠加层执行此操作，否则我将无法在其中滚动。

如果我改为#wordInner { position: fixed;改为#wordInner { position: absolute;，它就可以滚动，但不会占用整个页面（而是在屏幕中间居中，就像正常{{ 1}}类。在JsBin中，它在container上，但是改变它以查看我正在谈论的问题。

我的代码背后的逻辑是我使用position: absolute，并设置相同div的样式，以便它占用整个页面（因为col-lg-12显然不起作用。）

主要css：

width: 100%

ZenPen的css（指向默认ZenPen css的链接）：

#wrap {
    position: relative;
}
#main {
    position: relative;
}

相关的html（链接到ZenPen html：ZenPen html）：

#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;
}

Answer 1

您可以将html, body上的溢出设置为overflow: hidden，然后设置#wordInner { position: fixed; overflow: auto;。这将确保页面右侧只有一个可见的滚动条，并且仅在需要时。如果您需要将overflow设置为其他页面的visible，则可以在打开和关闭#word应用时使用jQuery（因为您已经在使用它）进行设置。

选项1（仅使用CSS）： jsBin

html, body
{
  overflow: hidden;
}

#wordInner {  
  position: fixed;
  overflow: auto;
  ...
}

选项2（使用CSS和jQuery）： jsBin

<强> CSS

#wordInner {  
  position: fixed;
  overflow: auto;
  ...
}

<强>的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();
});