Question

我有一个例子here。

基本上我有一个始终存在的滚动条，即使它当前不需要。问题：如果我的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() function将元素滚动到视图中而不会让它聚焦。

Answer 2

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

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

点击此处http://jsfiddle.net/83659/2/

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

2 个答案: