javascript - 将隐藏文本放到我的容器顶部

标签 javascript html css overflow

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

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

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

在哪里540是我的 div#content高度。

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

有什么方法可以让隐藏的文本到我的容器顶部吗?

最佳答案

据我所知,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),它不会一直滚动,因为没有内容可以滚动那么远。

如果您希望它进一步滚动,请将另一个 div 放入其中至少超出内容 540 像素,或者添加“空白”内容以扩展可滚动区域。

关于javascript - 将隐藏文本放到我的容器顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24624905/

相关文章:

jQuery:选择器问题(破折号)

javascript - RxJS 5 子类化 Observable - 静态方法返回父类的实例

JavaScript 倒计时器未启动 [包含代码]

javascript - Svelte.js - 无法正确从列表中删除项目

html - alt属性中的文字会出现的原因

javascript - 你如何为 javascript/css 设置最大年龄?

javascript - 使用 AngularJS 的 ng-options 进行选择

javascript - 使用javascript从web sql中的结果集中删除行

php - 如何从html输入向MySQL插入日期?

javascript - Facebook javascript sdk分享gif动画对话框flicks