隠すオーバーフロー-yのスクロールバーに必要な

Question

イムない限り、私のdivの垂直スクロールバー（明らかにいやIK）を得overflow-yを使用してそうすること私は

Aを必要なときにのみスクロールバーを表示する方法を知りたいのdivにスクロールバーを保持します私のコードでdivが、このコードに関連するCSSが

.left{ 
     float:left; 
     width:25%; 
     height:100%; 
     overflow: auto; 
     overflow-y: auto; 
    } 

あり、この

<div class="panel left" id="terminalPanel"> 
     <center><h4>Terminal</h4></center> 
     <hr> 
     <b>Money:</b> <span id="money"></span><br> 
     <b>Level: </b><span id="level"></span><br> 
     <b>Exp:</b> <progress id="expProgress" value="2" max="3"></progress> 
     <center><canvas id="terminalCanvas" width="200" height="200"></canvas></center> 
    </div> 

のように見えます

また、パネルクラスは問題がautoからoverflow-yプロパティを設定 http://flameforged.altervista.org/games2/ci/

Answer 1

使用overflow: auto;。できます。私はテストしました。高さを100％に設定すると、ページがスクロールしてdivになりません。この場合、％を使用しないでください。代わりにpxを使用してください。しかし、画面サイズの互換性を望む人は、％の代わりにvh（ビューポートの高さの1％を基準にして）を使用できます。

Answer 2

助けを見た場合、私のページで、ここで

ブートストラップEDIT から来ている： overflow-y: auto;

編集：

を

CSSを次のように変更してみてください。

#terminalPanel{ 
     float:left; 
     width:25%; 
     height:100%; 
     overflow: auto; 
     overflow-y: auto; 
    } 

そのdoesntの仕事しようとした場合：

.left{ 
    float:left; 
    width:25%; 
    height:100%; 
    overflow: auto !important; 
    overflow-y: auto !important; 
} 

Answer 3

純粋なCSSではできないと思います。 javacriptを使用することを躊躇しない場合は、DIVのscrollHeightとinnerHeightの違いを確認してください（DIVの高さを指定したとします）、それに応じてoverflow-yのプロパティを変更してください。以下は例です。

var intervalID = setInterval(function() { 
 
    $('#div').html($('#div').html() + 'A new line added.<br />'); 
 
    if (($('#div')[0].scrollHeight > $('#div').innerHeight()) && ($('#div').css('overflow-y') === 'hidden')) { 
 
    $('#div').css('overflow-y', 'auto'); 
 
    clearInterval(intervalID); 
 
    } 
 
}, 100);

#div { 
 
    height: 200px; 
 
    overflow-y: hidden; 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="div"> 
 
</div>