如何隐藏滚动条直到需要它们然后在不需要时删除

Question

我在这里有一个例子.

基本上我有一个始终存在的滚动条,即使它当前不需要.问题:如果我的div的高度超过300像素,我想要一个滚动条.

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

我会赞美任何帮助.我知道我需要使用JS,但我甚至不知道从哪里开始.

问题2:是否有一个简单的命令可以使用,当我按下添加按钮时,它会滚动到滚动条的最底部？

Answer 1

在您的CSS中,只需根据此更新设置height而不是max-height设置overflow : auto您的演示:http://jsfiddle.net/nnnnnn/83659/4/

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

问题2:如果你调用.focus()新添加的输入,它应该将其带入视图并将光标放入字段:http://jsfiddle.net/nnnnnn/83659/4/

或者,您可以使用(非jQuery).scrollIntoView()函数将元素滚动到视图中而不给它焦点.

Answer 2

只需添加一个固定的height和overflow: auto:

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

点击这里http://jsfiddle.net/83659/2/