jquery动态设置滚动条位置

赶路人儿

于 2020-01-07 19:20:40 发布

阅读量6.5k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/liuxiao723846/article/details/103880202

版权

web前端专栏收录该内容

294 篇文章

订阅专栏

本文介绍了一种使用jQuery实现div中动态添加新内容时自动滚动到最新数据的技术。通过使用scrollTop()和scrollHeight()方法，确保了良好的用户体验，避免了新内容加载后滚动条停留在顶部的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

假设有一个div，里面会不断append新的内容，当超过一定高度后会出现滚动条。

但是新内容append后，滚动条的位置始终不变，会在顶部。这种体验很不好，我们希望能够动态调整滚动条位置到最新数据处。

关于滚动条jQuery 提供了一下方法：

scrollTop() 方法，可以用来返回或设置匹配元素的滚动条的垂直位置；
scrollHeight()方法，获取滚动条高度；

示例：

<div id="log-container" style="height: 99%; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
    <div style="line-height:20px;font-size:17px;"></div>
</div>

ws.onmessage = function(event) {
		var _data = event.data;
		//ceontent
		$("#log-container div").append(_data).append("<br/>");
		//获取滚动条高度
		var sh = $("#log-container").prop("scrollHeight");
        //设置滚动条位置
        $('#log-container').scrollTop(sh);
        //或者加一个动画过渡
        $('#log-container').animate({scrollTop:sh},100);
};

每次新数据append时都会触发滚动条调整位置。

参考：https://www.hangge.com/blog/cache/detail_1360.html