2012-02-18 51 views
6

我有一个示例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:有没有简单的命令,我可以使用它,当我按下添加按钮它滚动到滚动最底部?

回答

15

在你的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的元素滚动到视图没有给予重点。

5

只需添加一个固定heightoverflow: auto

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

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

+1

+1:你击败了我不到20秒! – nnnnnn 2012-02-18 05:05:13

+0

安静的夜晚。我很无聊,一直在刷新15分钟。 – elclanrs 2012-02-18 05:06:28