How to hide scroll bars until they are needed then remove if not needed

Question

I have an example here.

Basically i have a scroll bar that is always present, even if it is not currently needed. Problem: I want a scroll bar to appear if the height of my div exceeds 300 pix.

<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 would appriciate any help. i know i need to use JS but im not even sure where to begin.

Question 2: Is there a easy command that i can use that when i push the add button it scrolls to the very bottom of the scroller?

Answer 1

In your CSS just set the height rather than max-height and set overflow : auto, as per this update to your demo: http://jsfiddle.net/nnnnnn/83659/4/

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

Question 2: if you call .focus() on your newly added input it should bring it into view and put the cursor into the field: http://jsfiddle.net/nnnnnn/83659/4/

Alternatively you can use the (non-jQuery) .scrollIntoView() function to scroll the element into view without giving it focus.

Answer 2

Just add a fixed height and overflow: auto:

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

Check here http://jsfiddle.net/83659/2/