第一次单击后,滚动到顶部滚动到底部

Vedant Nare

我想滚动到一个元素的底部。我在这里搜索解决方案,但是却得到了答案,但是滚动顶部在第一次单击时设置为零,如果再次单击该元素,则滚动到底部。我想滚动到第一次单击的底部。重复给我的建议是错误的。我正在使用Javascript。不是jquery,

var element = document.querySelector('.message');
element.scrollTop = element.scrollHeight;
.message {
    width: 900px;
    height: 450px;
    margin-top: 0%;
    overflow-y: scroll;  
}

迪奥戈·佩雷斯(Diogo Peres)

我已经复制了您的问题,该问题正在发挥作用。当我第一次单击消息区域时,消息滚动到底部。

这是工作示例:

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

单击div时滚动到顶部,如果滚动在顶部,则滚动到底部

来自分类Dev

Javascript滚动到顶部并滚动到底部

来自分类Dev

延迟后(仅一次)或第一次加载页面上的 iFrame 后滚动到页面顶部

来自分类Dev

向上滚动列表屏幕,每一项单击一次,以前的项目向上滚动到顶部

来自分类Dev

在jQuery中滚动到顶部和滚动到底部

来自分类Dev

在jQuery中滚动到顶部和滚动到底部

来自分类Dev

Android ListView从底部滚动到顶部?

来自分类Dev

滚动到视图/滚动到顶部

来自分类Dev

滚动滚动到底部,但内容保持在顶部

来自分类Dev

ListView自动滚动仅在手动滚动到底部一次时有效

来自分类Dev

分页-滚动到顶部

来自分类Dev

自动滚动到顶部

来自分类Dev

页面滚动到顶部后,返回到滚动位置

来自分类Dev

滚动到顶部动画后不向下滚动

来自分类Dev

当页面从底部单击时,jQuery数据表滚动到顶部

来自分类Dev

jQuery:滚动到底部动画后滚动位置被锁定

来自分类Dev

UITableView滚动到底部

来自分类Dev

自动滚动到底部

来自分类Dev

如何让容器从顶部向下滚动到底部

来自分类Dev

Android选项卡单击滚动到顶部

来自分类Dev

单击图像时如何使我的网站滚动到顶部

来自分类Dev

标签栏单击以滚动到顶部表格视图

来自分类Dev

单击时,jQuery分页按钮滚动到顶部

来自分类Dev

单击onclick单元格时滚动到顶部

来自分类Dev

单击选项卡时防止滚动到顶部

来自分类Dev

用户单击“阅读更多”链接后,停止页面滚动到顶部

来自分类Dev

触发单击后,使用URL中的哈希值,页面需要滚动到顶部

来自分类Dev

更改视图后,angularJS不会滚动到顶部

来自分类Dev

加载网址后将webview滚动到顶部

Related 相关文章

热门标签

归档