jquery动态设置滚动条位置

假设有一个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

发布了800 篇原创文章 · 获赞 460 · 访问量 436万+

猜你喜欢

转载自blog.csdn.net/liuxiao723846/article/details/103880202