html - 页面级别和元素滚动条

Question

以下是 fiddle :http://plnkr.co/edit/peQEGK4mNiPBqlknrO6V?p=preview

代码是:

 <div id="navBar">
<nav id="nav" class="side-nav">
    <!--<ul>
        <li><a href="#">menuitem 1</a></li>
        <li><a href="#">menuitem 2</a></li>
        <li><a href="#">menuitem 3</a></li>
        <li><a href="#">menuitem 4</a></li>
        <li><a href="#">menuitem 5</a></li>
        <li><a href="#">menuitem 6</a></li>
        <li><a href="#">menuitem 1</a></li>
        <li><a href="#">menuitem 2</a></li>
        <li><a href="#">menuitem 3</a></li>
        <li><a href="#">menuitem 4</a></li>
        <li><a href="#">menuitem 5</a></li>
        <li><a href="#">menuitem 6</a></li>
        <li><a href="#">menuitem 1</a></li>
        <li><a href="#">menuitem 2</a></li>
        <li><a href="#">menuitem 3</a></li>
        <li><a href="#">menuitem 4</a></li>
        <li><a href="#">menuitem 5</a></li>
        <li><a href="#">menuitem 6</a></li>
        <li><a href="#">menuitem 1</a></li>
        <li><a href="#">menuitem 2</a></li>
        <li><a href="#">menuitem 3</a></li>
        <li><a href="#">menuitem 4</a></li>
        <li><a href="#">menuitem 5</a></li>
        <li><a href="#">menuitem 6</a></li>
        <li><a href="#">menuitem 1</a></li>
        <li><a href="#">menuitem 2</a></li>
        <li><a href="#">menuitem 3</a></li>
        <li><a href="#">menuitem 4</a></li>
        <li><a href="#">menuitem 5</a></li>
        <li><a href="#">menuitem 6</a></li>
        <li><a href="#">menuitem 1</a></li>
        <li><a href="#">menuitem 2</a></li>
        <li><a href="#">menuitem 3</a></li>
        <li><a href="#">menuitem 4</a></li>
        <li><a href="#">menuitem 5</a></li>
        <li><a href="#">menuitem 6</a></li>-->
        <ul id="nav-contain" aria-live="polite" title="navigation menu" tabindex="-1">
     <li class="menu-home main-menu closed">
        <a href="#"  >
           <p >Menu Level 1</p>
        </a>

     </li>
     <li class="main-menu closed" >
        <a href="#" >
           <p>Menu Level 1</p>
        </a>

     </li>
     <li class="main-menu closed">
        <a href="#" >
           <p>Menu Level 1</p>
        </a>

     </li>
     <li class="main-menu closed" >
        <a href="javascript:void(0);" >
           <p>Menu</p>
        </a>
        <ul class="expand" >
           <li class="main-menu" >
              <a href="#">
                 <p>Menu</p>
              </a>

           </li>

  </ul>
  </li>
  <li class="main-menu closed">
        <a href="#" >
           <p>Menu Level 1</p>
        </a>

     </li>
     <li class="main-menu closed">
        <a href="#" >
           <p>Menu Level 1</p>
        </a>

     </li>
     <li class="main-menu closed">
        <a href="#" >
           <p>Menu Level 1</p>
        </a>

     </li>
     <li class="main-menu closed">
        <a href="#" >
           <p>Menu Level 1</p>
        </a>

     </li>
     <li class="main-menu closed">
        <a href="#" >
           <p>Menu Level 1</p>
        </a>

     </li>
     <li class="main-menu closed">
        <a href="#" >
           <p>Menu Level 1</p>
        </a>

     </li>
     <li class="main-menu closed">
        <a href="#" >
           <p>Menu Level 1</p>
        </a>

     </li>
     <li class="main-menu closed">
        <a href="#" >
           <p>Menu Level 1</p>
        </a>

     </li>
     <li class="main-menu closed">
        <a href="#" >
           <p>Menu Level 1</p>
        </a>

     </li>
  </ul>

</nav>
</div>

如果我们查看输出有 2 个滚动，一个是页面级滚动，另一个是元素级滚动。我只想要一个页面级别滚动的滚动条。

Answer 1

#viewport 
{ 
      min-height: 100%;
      overflow-x: hidden;
      position: relative;
      width: 100%;
}

从此 css id 中删除位置属性。