設定オーバーフローが固定のdivに動作しません

Question

オーバーフロースクロール機能しない、ここで解決codepen demo

 
     #side-navbar { 
      overflow: scroll; 
      position: fixed; 
      min-height: 100vh; 
      width: 6rem; 
      float: left; 
      background-color: #000; 
      -webkit-box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45); 
      -moz-box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45); 
      box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45); 
     }
 

#side-navbar .logo img { 
     margin: 0.5rem; 
     width: 5rem; 
     height: auto; 
    } 

    #side-navbar .menu-container { 
     overflow:visible; 
     min-height: calc(100vh - 24.6rem); 
     display: -webkit-box; 
     display: -moz-box; 
     display: -ms-flexbox; 
     display: -webkit-flex; 
     display: flex; 
     -webkit-box-align: center; 
     -webkit-align-items: center; 
     -moz-box-align: center; 
     -ms-flex-align: center; 
     align-items: center; 
     width: 100%; 
     -webkit-box-pack: center; 
     -moz-box-pack: center; 
     -ms-flex-pack: center; 
     -webkit-justify-content: center; 
     justify-content: center; 
    } 
    #side-navbar ul.social-menu { 
     overflow: visible; 
    } 
</pre> 

Answer 1

問題があります。 min-heightを使用すると、メニューは永遠にレンダリングされますが、高さが使用されている場合はスクロールが完全に機能します。

Answer 2

2つのこと：まずmin-heightの代わりにheightを試してみてください。第二に、overflow-y:autoを使用してください、それはoverflow:scrollより良い方法で動作します。ここにあなたのコードは次のとおりです。

#side-navbar { 
 
      overflow-y: auto; 
 
      position: fixed; 
 
      height: 100vh; 
 
      width: 6rem; 
 
      float: left; 
 
      background-color: #000; 
 
      -webkit-box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45); 
 
      -moz-box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45); 
 
      box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.45); 
 
     }

<div id="side-navbar"> 
 
<hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>ya scroll<hr><hr><hr><hr><hr> 
 

 
</div>

それはスニペットで動作します。あなたのコードで試してみてください。 overflow-y autoを使いたくない場合は、overflow-y:scrollを必ず使用してください。