Cómo ocultar las barras de desplazamiento hasta que se necesiten y luego eliminar si no es necesario

Question

Tengo un ejemplo here.

Básicamente tengo una barra de desplazamiento que siempre está presente, incluso si no se necesita actualmente. Problema: quiero que aparezca una barra de desplazamiento si la altura de mi div supera los 300 píxeles.

<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> 

I appriciate cualquier ayuda. Sé que necesito usar JS, pero no estoy seguro de por dónde empezar.

Pregunta 2: ¿Hay un comando fácil de usar que cuando presiono el botón Agregar se desplaza hacia la parte inferior de la barra de desplazamiento?

Answer 1

En tu CSS acaba de establecer la height en lugar de max-height y establecer overflow : auto, según esta actualización para su demostración: http://jsfiddle.net/nnnnnn/83659/4/

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

Pregunta 2: si llama .focus() en su entrada recién añadida que debe llevarlo a la vista y poner el cursor en el campo: http://jsfiddle.net/nnnnnn/83659/4/

Alternativamente, puede utilizar el (no jQuery) .scrollIntoView() function para desplazar el elemento a la vista sin darle enfoque.

Answer 2

Sólo tiene que añadir un fijo height y overflow: auto:

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

Marque aquí http://jsfiddle.net/83659/2/