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

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

本文关键字：然后 删除 不需要 如果不 如果 何隐藏 隐藏 滚动条      更新时间：2023-09-26

这里有一个例子。

基本上，我有一个滚动条，它总是存在，即使目前不需要它。问题：如果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：有没有一个简单的命令可以让我使用，当我按下添加按钮时，它会滚动到滚动条的最底部？

在您的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()函数将元素滚动到视图中，而不给它焦点。

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

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

请在此处查看http://jsfiddle.net/83659/2/

相关文章：