将隐藏文本放到容器顶部

时间:2014-07-08 06:18:18

标签: javascript html css overflow

我有一个div#content属性overflow:scroll;,当我点击按钮时,我想在div#content的开头显示隐藏的文字。

我在我的onClick函数处理程序中尝试过:

var objDiv = document.getElementById("contenido");
objDiv.scrollTop = 540;

540是我的div#content身高。

当我有多行隐藏文本时,我的工作非常完美,但如果我有一行隐藏文本,则此代码不会将最后一行放在我的div顶部。

有没有办法将隐藏文字放到我的容器顶部?

1 个答案:

答案 0 :(得分:0)

据我所知,div只会滚动到需要的最后一行进入视图。如果您只有一行内容,则无法滚动到540px,因为无法滚动到任何内容。例如以下工作正常:

<button onclick="document.getElementById('d1').scrollTop = 100">scroll</button>

<div id="d1" style="height: 100px; width: 200px; border: 1px solid black;
 overflow:scroll;">Lorem ipsumin eros scelerisque commodo non id nisi. Ut
 porta non eros eget malesuada. Curabitur adipiscing bibendum sapien quis
 porta. Nam ac dui a quam aliquet volutpat. Curabitur ac mi quam. Fusce
 consectetur, ipsum sed venenatis feugiat, ligula leo luctus neque, ac
 rutrum sapien erat ac mi. Aliquam nulla leo, gravida sit amet velit nec, 
 commodo bibendum lacus. Quisque sapien risus, aliquet nec nisl et, sodales
 ullamcorper risus. In porttitor justo id  pellentesque sollicitudin.
 Quisque sodales purus non felis iaculis tincidunt. Vestibulum urna metus,
 mattis in</div>

因为有足够的内容可供滚动。将内容减少到几个单词(或将滚动增加到2000),它不会一直滚动,因为没有内容可以滚动到那么远。

如果您希望它进一步滚动,请在内部放置至少超出内容540px的另一个div,或者添加&#34;空白&#34;内容以扩展可滚动区域。