独立したスクロールバーを持つ固定位置のサイドバー？

Question

私はシンプルなCSS設定をしていますが、私の問題を修正する方法についてはわかりません。

私は、左側に固定サイドバーがあり、右側にコンテンツペインがあります。

右側は右側の目次用ですので、右側のレポート内のさまざまな場所に簡単にジャンプできます。

レポートが非常に長く（TOC）、メインコンテンツとスクロールするとサイドバーが固定されたままにしておき、それにアクセスするために常にトップにスクロールしなければならないため、かなり無駄です。

多くの場合、TOCが長すぎてサイドバーの下部を過ぎているので、サイドバーにメインのコンテンツから独立したスクロールバーを持たせる必要があるという問題があります。これはフレームでは可能だったのですが、CSSでどうやってやっていますか？

<div style="width:100%;" class="wrapper"> 
     <div class="contentWrapper" style="width:100%;"> 
      <form id="FormData" runat="server" style="background-color:whitesmoke" > 
       <div id="leftnav" runat="server" class="left-nav" style="width:20%; float:left; position:fixed; height:100%; background-color:#0071c5; top: 0px; left: 0px;">  
        <div id="tableofcontents" runat="server"></div> 
       </div> 

       <div id="content" runat="server" class="content" style="width:80%; float:right;"> 

      </div> 
      </form> 
     </div> 
    </div> 

Answer 1

以下

コードは、左のナビゲーションdivの上

overflow-y:scroll 

スタイル修飾子を使用するために必要な、それを発見しました。