html - 在固定位置覆盖内滚动

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 上的溢出设置为 overflow: hidden 然后设置 #wordInner { position: fixed;溢出:自动；。这将确保页面右侧只有一个可见的滚动条，并且仅在需要时显示。如果您需要将其他页面的 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();
});