在固定位置疊加內滾動

Question

JsBin 。 單擊左側的按鈕。 第一個是不需要滾動的疊加示例（因此它完美地工作），第二個按鈕什么都不做，第三個按鈕是我正在描述的問題。 請注意，我在css選項卡中的主樣式之前復制/粘貼了ZenPen樣式。

我正在使用Bootstrap 3.0和ZenPen 。 我的想法是，我在屏幕左側有一個菜單，您可以單擊按鈕隱藏並顯示不同的“應用程序”或疊加層。 這些疊加使用position: fixed ，但我無法為ZenPen疊加層執行此操作，否則我將無法在其中滾動。

如果我改變#wordInner { position: fixed; 到#wordInner { position: absolute; 相反，它將能夠滾動，但它不會占用整個頁面（而是在屏幕中間像普通的container類一樣居中。在JsBin中，它在position: absolute ，但是改變它以查看我正在談論的問題。

我的代碼背后的邏輯是我使用col-lg-12 ，並且使用相同div的樣式以便占用整個頁面（因為width: 100%顯然不起作用。）

主要css：

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

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

和相關的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>

Answer 1

您可以在html, body上設置溢出html, body為overflow: hidden ，然后設置#wordInner { position: fixed; overflow: auto; #wordInner { position: fixed; overflow: auto; 。 這將確保頁面右側只有一個可見的滾動條，並且僅在需要時。 如果你需要overflow設置為visible的其他頁面，你可以設置它使用jQuery（因為你已經在使用也無妨）當您打開和關閉#word應用。

選項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();
});