javascript 如何隐藏滚动条直到需要它们然后在不需要时删除
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9338718/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide scroll bars until they are needed then remove if not needed
提问by user1082764
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.
基本上我有一个始终存在的滚动条，即使当前不需要它。问题：如果我的 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>
I would appriciate any help. i know i need to use JS but im not even sure where to begin.
我会appriciate任何帮助。我知道我需要使用 JS，但我什至不知道从哪里开始。
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?
问题 2：是否有一个简单的命令可以在我按下添加按钮时使用它，它会滚动到滚动条的最底部？
回答by nnnnnn
In your CSS just set the heightrather than max-heightand set overflow : auto, as per this update to your demo: http://jsfiddle.net/nnnnnn/83659/4/
在您的 CSS 中，只需设置height而不是max-height和设置overflow : auto，根据对您的演示的此更新：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/
问题 2：如果您调用.focus()新添加的输入，它应该将其显示出来并将光标置于该字段中：http: //jsfiddle.net/nnnnnn/83659/4/
Alternatively you can use the (non-jQuery) .scrollIntoView()functionto scroll the element into view without giving it focus.
或者，您可以使用（非 jQuery）.scrollIntoView()函数将元素滚动到视图中，而无需为其提供焦点。
回答by elclanrs
Just add a fixed heightand overflow: auto:
只需添加一个固定的height和overflow: auto：
.scroll {
background-color: #00FFFF;
width: 190px;
height: 100px;
overflow: auto;
}
Check here http://jsfiddle.net/83659/2/
