Come nascondere le barre di scorrimento fino a quando non sono necessari quindi rimuovere se non necessario

Question

Ho un esempio here.

Ho basicamente una barra di scorrimento che è sempre presente, anche se non è attualmente necessaria. Problema: voglio che venga visualizzata una barra di scorrimento se l'altezza del mio div supera i 300 pixel.

<fieldset id="typography"> 
<ul> 
    <li><label for="Poll Question">Header</label></li> 
    <li><input type="text" id="formheader" value="Header"></input></li> 
    <div class="scroll">   
     <li><label>Answers</label></li> 
     <li id="formanswer1" class="clonedInput"><input type="text" id="formanswer1" value="" /></li> 
     <li id="formanswer2" class="clonedInput"><input type="text" id="formanswer2" value="" /></li> 
     <li id="formanswer3" class="clonedInput"><input type="text" id="formanswer3" value="" /></li> 
    </div>  
    <li><input type="button" id="btnAdd" value="Add Answer" /> 
    <input type="button" id="btnDel" value="Remove Answer" /></li> 
</ul> 

mi appriciate alcun aiuto. so che ho bisogno di usare JS ma non sono nemmeno sicuro da dove cominciare.

Domanda 2: C'è un comando facile che posso usare quando faccio clic sul pulsante Aggiungi per scorrere fino in fondo allo scroller?

Answer 1

nel CSS è sufficiente impostare il height piuttosto che max-height e impostare overflow : auto, come da questo aggiornamento per il vostro demo: http://jsfiddle.net/nnnnnn/83659/4/

div.scroll { 
    background-color:#00FFFF; 
    width:190px; 
    height:90px; 
    overflow:auto; 
} 

Domanda 2: se si chiama .focus() sul vostro input appena aggiunto che dovrebbe portarlo in vista e posizionare il cursore nel campo: http://jsfiddle.net/nnnnnn/83659/4/

In alternativa è possibile utilizzare la (non jQuery) .scrollIntoView() function per scorrere l'elemento nella vista senza dargli fuoco.

Answer 2

Basta aggiungere un fisso height e overflow: auto:

.scroll { 
    background-color: #00FFFF; 
    width: 190px; 
    height: 100px; 
    overflow: auto; 
} 

controllare qui http://jsfiddle.net/83659/2/