nanoScrollbar无法在DIV内使用鼠标滚轮时工作

我正在尝试制作两行css网页布局，并适合可用的窗口高度。如果底部div高度上的内容应该使用纳米滚动来显示滚动条。代码如下。nanoScrollbar无法在DIV内使用鼠标滚轮时工作

当在内容div中使用鼠标滚轮时，它不会移动纳米滚动条。只有当您将鼠标移动到纳米滚动的顶部并进行滚动时，它才能正常工作。

<html> 
    <head> 
     <style type="text/css"> 
      * { 
       margin: 0; 
       padding: 0; 
      } 

      html, body, .Container, .myContent { 
       height: 100%; 
      } 

       .Container:before { 
        content: ''; 
        height: 100%; 
        float: left; 
       } 

      .HeightTaker { 
       position: relative; 
       z-index: 1; 
      } 

      .HeightTaker:after { 
       content: ''; 
       clear: both; 
       display: block; 
      } 

      .Wrapper { 
       position: absolute; 
       width: 100%; 
       height: 100%; 
      } 

      .myContent { 
       overflow: inherit; 
       background-color: #66cab7; 
       text-align: center; 
      } 

      .Header { 
       background-color: #bf5b5b; 
       text-align: center; 
      } 

      /** nano css **/ 
      .nano { 
       position: relative; 
       width: 100%; 
       height: 100%; 
       overflow: hidden; 
      } 

      .nano .nano-content { 
       position: absolute; 
       overflow: scroll; 
       overflow-x: hidden; 
       top: 0; 
       right: 0; 
       bottom: 0; 
       left: 0; 
      } 

      nano .nano-content:focus { 
       outline: thin dotted; 
      } 

      .nano .nano-content::-webkit-scrollbar { 
       visibility: hidden; 
      } 

      .has-scrollbar .nano-content::-webkit-scrollbar { 
       visibility: visible; 
      } 

      .nano > .pane { 
       background: rgba(0,0,0,.25); 
       position: absolute; 
       width: 10px; 
       right: 0; 
       top: 0; 
       bottom: 0; 
       visibility: hidden\9; /* Target only IE7 and IE8 with this hack */ 
       opacity: .01; 
       -webkit-transition: .2s; 
       -moz-transition: .2s; 
       -o-transition: .2s; 
       transition: .2s; 
       -moz-border-radius: 5px; 
       -webkit-border-radius: 5px; 
       border-radius: 5px; 
      } 

      .nano > .pane > .slider { 
       background: #444; 
       background: rgba(0,0,0,.5); 
       position: relative; 
       margin: 0 1px; 
       -moz-border-radius: 3px; 
       -webkit-border-radius: 3px; 
       border-radius: 3px; 
      } 

      .nano:hover > .pane, .pane.active, .pane.flashed { 
       visibility: visible\9; /* Target only IE7 and IE8 with this hack */ 
       opacity: 0.99; 
      } 
     </style> 
     <script src="https://dl.dropboxusercontent.com/u/2781659/js/jquery-2.0.3.js" type="text/javascript"></script> 
     <script src="https://dl.dropboxusercontent.com/u/2781659/js/jquery.nanoscroller.js" type="text/javascript"></script> 

     <script type="text/javascript"> 
      $(function() { 
       $(".nano").nanoScroller(); 
      }); 
     </script> 
    </head> 
    <body> 
     <div class="Container"> 
      <div class="Header"> 
       <h1>Header</h1> 
       <p>if The Header height is not fixed, It will span excatly his needed space.</p> 
       <p>The Padding/Margin between the header and the content and around the layout is optional</p> 

      </div> 
      <div class="HeightTaker"> 
       <div class="Wrapper"> 
        <div class="nano"> 
         <div class="content myContent"> 
          <h1>Content</h1> 
          <p>The Content div should always span the available Container space.</p> 
          <p>If the content exceed the Content available space, it will scroll.</p> 
          <p><a target="_blank" href="http://jsfiddle.net/avrahamcool/58mkp/">Here's a demo of this scenario</a></p> 
          <p class="Important">This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, Opera. using Pure CSS 2.1 only</p> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
          test<br /> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
    </html>

来源

2013-12-20 Paresh Varde

应用'溢出：继承;'来为myContent工作，但只能通过鼠标点击滚动。 – Anup

感谢Anup，但我无法使用此解决方案，因为我无法限制用户在滚动条上拖动鼠标以继续工作。请欣赏你的帮助 –