- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想滚动到元素的底部。我在这里搜索解决方案,我得到了这个但第一次单击时滚动顶部设置为零,如果我再次单击该元素,它会滚动到底部。我想在第一次单击时滚动到底部。向我建议的重复内容是错误的。我正在使用 JavaScript。不是jquery,
var element = document.querySelector('.message');
element.scrollTop = element.scrollHeight;
.message {
width: 900px;
height: 450px;
margin-top: 0%;
overflow-y: scroll;
}
最佳答案
我已经复制了您的问题并且有效。当我第一次在消息区域中单击时,消息滚动到底部。
这是工作示例:
document.querySelector('.message').addEventListener('click', () => {
var element = document.querySelector('.message');
element.scrollTop = element.scrollHeight;
})
.message {
width: 900px;
height: 100px;
margin-top: 0%;
overflow-y: scroll;
}
<div class="message">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur lorem donec massa sapien faucibus. Lorem ipsum dolor sit amet consectetur adipiscing elit duis. Massa ultricies mi quis hendrerit dolor magna eget est lorem. Diam quam nulla porttitor massa id. Semper viverra nam libero justo laoreet. Dui vivamus arcu felis bibendum ut tristique et. Proin sed libero enim sed faucibus. Consectetur libero id faucibus nisl tincidunt. Arcu felis bibendum ut tristique et egestas quis ipsum. Quisque id diam vel quam. Dui sapien eget mi proin sed. Sit amet luctus venenatis lectus magna fringilla.
Velit dignissim sodales ut eu sem. Malesuada fames ac turpis egestas sed. Tellus orci ac auctor augue mauris augue neque gravida. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Facilisis mauris sit amet massa vitae tortor condimentum. Feugiat nibh sed pulvinar proin. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Laoreet sit amet cursus sit amet. Diam maecenas sed enim ut sem viverra aliquet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Sagittis orci a scelerisque purus semper eget duis. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Odio tempor orci dapibus ultrices in iaculis. Lacus sed turpis tincidunt id.
Tortor condimentum lacinia quis vel eros donec ac odio tempor. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Luctus accumsan tortor posuere ac. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Amet cursus sit amet dictum sit amet justo donec enim. Integer vitae justo eget magna fermentum. Lectus arcu bibendum at varius vel pharetra vel. Diam maecenas ultricies mi eget mauris pharetra et. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Nullam non nisi est sit amet facilisis magna etiam tempor. Laoreet non curabitur gravida arcu ac tortor. Sed velit dignissim sodales ut eu. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec.
Enim ut sem viverra aliquet. Sit amet cursus sit amet dictum. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Nullam vehicula ipsum a arcu cursus vitae congue mauris rhoncus. In hac habitasse platea dictumst quisque sagittis purus. Libero justo laoreet sit amet cursus sit amet dictum. Nisl vel pretium lectus quam id. Tempor orci dapibus ultrices in iaculis nunc. Turpis egestas pretium aenean pharetra. Sit amet commodo nulla facilisi. Eget est lorem ipsum dolor sit amet consectetur. Sagittis vitae et leo duis ut diam quam. Nulla aliquet enim tortor at auctor urna nunc id cursus. Curabitur vitae nunc sed velit dignissim sodales. Sit amet massa vitae tortor condimentum lacinia quis vel. Id nibh tortor id aliquet lectus proin.
Varius quam quisque id diam vel quam elementum. Felis eget velit aliquet sagittis id consectetur purus ut. Mauris a diam maecenas sed enim ut sem viverra aliquet. Arcu dui vivamus arcu felis. Ac turpis egestas sed tempus urna et. Vel pharetra vel turpis nunc eget lorem. Praesent tristique magna sit amet purus. In ornare quam viverra orci sagittis. Potenti nullam ac tortor vitae purus. Donec ac odio tempor orci dapibus ultrices in.
Varius quam quisque id diam vel quam elementum. Felis eget velit aliquet sagittis id consectetur purus ut. Mauris a diam maecenas sed enim ut sem viverra aliquet. Arcu dui vivamus arcu felis. Ac turpis egestas sed tempus urna et. Vel pharetra vel turpis nunc eget lorem. Praesent tristique magna sit amet purus. In ornare quam viverra orci sagittis. Potenti nullam ac tortor vitae purus. Donec ac odio tempor orci dapibus ultrices in.
Varius quam quisque id diam vel quam elementum. Felis eget velit aliquet sagittis id consectetur purus ut. Mauris a diam maecenas sed enim ut sem viverra aliquet. Arcu dui vivamus arcu felis. Ac turpis egestas sed tempus urna et. Vel pharetra vel turpis nunc eget lorem. Praesent tristique magna sit amet purus. In ornare quam viverra orci sagittis. Potenti nullam ac tortor vitae purus. Donec ac odio tempor orci dapibus ultrices in.
</div>
关于javascript - 第一次点击后滚动顶部滚动到底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58353388/
我正在尝试向图像顶部和底部的 ImageView 添加渐变。我不想在 ImageView 之上添加 TextView 。我该如何实现? 最佳答案 看来您简单而干净的解决方案是用 FrameLayout
我可以寻求帮助吗, 我有日期 - “公司名称”和“日期”,例如 $value |"Comp Name"| "Date" | |:----------|----------:| |computer
我有两个表,我试图从中运行查询以返回每个人的最大(或最高)交易。我应该注意,我无法更改表结构。相反,我只能拉数据。 人 +-----------+| id | name |+-----------+|
所以我有一个用管道打开的 n 个流的数组,但是使用 gdb,我发现当我尝试关闭流或管道的写入端时程序失败。我可以很好地写入管道,但关闭它们不起作用。我在程序上运行 valgrind,它所做的只是打印出
大家好,这是我的难题。我正在尝试创建一个标签栏,该标签栏从上到下锚定在左侧,而不是从左到右锚定在底部。我创建了一个工具栏项目,将栏准确地放置在我想要的位置,但我希望选项卡栏相同,具有相同的功能,当然除
http://jsfiddle.net/GuXQZ/3/ header slideshow lates Content
我的图片出了点问题,我无法解决这个问题。这是我的代码.. HTML HIDE CSS #ads { -webkit-border-bottom-right-r
我有一个包含 3(css 网格)列的设计。第二列有嵌套的网格内容需要垂直滚动,而其他两列保持各自的高度。我给第二个嵌套列一个溢出,但我还需要给它一个顶部和底部填充或边距。我的解决方案没有顶部/底部填充
我在 View 中有两个 UIToolbar,分别在顶部和底部。我正在尝试在 iOS 版本中一致地应用外观。从 iOS5 开始有这个 setBackgroundImage: forToolbarPos
一个 div 我使用 top:-26px; 在 css 中设置高度。我有其他 div 其他地方我想与那个 div 对齐。我注意到在 jquery 中编写 .css('top') 得到了我的 css 而
我有这个无序列表 two three 有没有一种方法可以将无序列表添加到无序列表的前面,使其像这样结束? ONE two three 请注意“ONE”已添加到列表
我想检测鼠标何时离开顶部的视口(viewport)(可以说是向北)。我在网上搜了下How can I detect when the mouse leaves the window? .是一个好的开始
运行顶级命令top -c在 Ubuntu 服务器上显示当前正在运行的所有命令。关于 PostgreSQL 命令,括号中的值是什么意思?我说的是图片中红色框旁边的值。 最佳答案 我找不到任何文档来支持这
我想知道将顶部和底部边距添加到 GtkTextView 的正确且普遍接受的方法位于 GtkScrolledWindow 内.有设置左右边距的功能,我正在使用: gtk_text_view_set_le
作为很多“初学者”,我认为使用 TOP_OF_PIPELINE 作为 dst 和 BOTTOM_OF_PIPELINE 作为 src 意味着 ALL_COMMANDS 两者。 Here Nicol B
我正在尝试使用 jQuery/Javascript 解决这个问题: 当浏览器向下滚动且窗口底部到达页脚 DIV 顶部时,执行 CSS 代码更改。 问题示例: https://elodywedding.
我想使用范围 slider 来选择一个值并将该值呈现在 Angular 中的范围选择器顶部。我的html代码是: Raio: {{raio}} metros 在我的 co
我想将手的图片放在靠近脸部的黑色 Canvas 上。这可以吗?有没有办法确定图片的位置? 这是我的代码: var canvas; var canvasContext; window
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 关闭 9 年前。 Improve this
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 关闭 9 年前。 Improve this
我是一名优秀的程序员,十分优秀!