6

Jsビン。左のボタンをクリックしてください。1 つ目はスクロールを必要としない (完全に機能する) オーバーレイの例で、2 つ目のボタンは何もしません。3 つ目のボタンは私が説明している問題です。css タブのメイン スタイルの前に ZenPen スタイルをコピー/貼り付けしたことに注意してください。

Bootstrap 3.0 とZenPenを使用しています。アイデアは、画面の左側にメニューがあり、ボタンをクリックしてさまざまな「アプリケーション」またはオーバーレイを非表示および表示できるということです。これらのオーバーレイは を使用しposition: fixedていますが、ZenPen オーバーレイではそれができません。そうしないと、オーバーレイ内でスクロールできません。

代わりに変更#wordInner { position: fixed;する#wordInner { position: absolute;と、スクロールできるようになりますが、ページ全体を占めることはありません (代わりに、通常のクラスのように画面の中央に配置されますcontainer。JsBin では onposition: absoluteですが、変更して、私が話している問題。

私のコードの背後にあるロジックは、 を使用しcol-lg-12、同じ div をスタイルして、ページ全体を取得することです (width: 100%明らかに a が機能しないため)。

メイン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>
4

1 に答える 1

14

オーバーフローを に設定してhtml, bodyからoverflow: hiddenに設定でき#wordInner { position: fixed; overflow: auto;ます。これにより、必要な場合にのみ、ページの右側にスクロールバーが 1 つだけ表示されるようになります。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();
});
于 2013-09-13T08:14:13.957 に答える