jquery动态设置滚动条位置

痛定思痛。 2021-06-22 15:36 669阅读 0赞

假设有一个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][https_www.hangge.com_blog_cache_detail_1360.html]

[https_www.hangge.com_blog_cache_detail_1360.html]: https://www.hangge.com/blog/cache/detail_1360.html

发表评论取消回复

表情：

评论列表（有 0 条评论，669人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery点击滚动条滑动到某个位置

对于锚点的平滑跳转，我觉得要谨慎使用，在个人站点或是这个效果含有功能提示可以用一用，在一般的商业性质的网站上，权衡来讲，不用更好，当然，这只是我的个人意见。jQuery库已经为

た入场券/ 2024年02月17日 15:58/ 0 赞/ 2 阅读

相关设置滚动条

横向竖向滚动条都有：style="overflow: scroll;" 只显示横向滚动条：style="overflow-x: scroll;" 只显示竖向滚动条：styl

雨点打透心脏的1/2处/ 2023年07月24日 09:19/ 0 赞/ 43 阅读

相关滚动条位置判断

//获取滚动条距离顶部位置 function getScrollTop() { var scrollTop = 0;

朴灿烈づ我的快乐病毒、/ 2023年06月11日 07:29/ 0 赞/ 27 阅读

相关设置element-iu中table滚动条位置

设置table的ref为tableList 设置滚动至顶部 this.$nextTick(()=>{ this.$refs.tableLi

骑猪看日落/ 2022年09月12日 01:50/ 0 赞/ 269 阅读

相关 jQuery判断滚动条滚动方向

方法一： <script> var position = $(window).scrollTop(); $(window).scr

系统管理员/ 2022年09月08日 14:59/ 0 赞/ 296 阅读

相关 jQuery实现将div中滚动条滚动到指定位置的方法

参考文章： [http://www.jb51.net/article/90185.htm][http_www.jb51.net_article_90185.htm]

小咪咪/ 2022年05月14日 02:50/ 0 赞/ 318 阅读

相关 jquery 滚动条滚动到底部

[菜鸟教程-prop][-prop] [菜鸟教程animate][animate] $("chartContainer").animate({scrollTop:$

àì夳堔傛蜴生んèń/ 2022年04月22日 13:14/ 0 赞/ 287 阅读

相关 echarts设置图表滚动条设置滚动条高度

在option配置项中设置dataZoom属性即可，height即可指定滚动条的高度，这里我就设置14。 dataZoom: [

￡神魔★判官ぃ/ 2022年03月12日 10:50/ 0 赞/ 1377 阅读

相关 js 滚动条属性、设置滚动条滚动速度

返回不带px的数值,没用负数,最小为0 .scrollTop 竖直滚动条到顶部的距离,即浏览器视口外的高度 .scrollLeft 水平

冷不防/ 2021年07月24日 20:07/ 0 赞/ 1926 阅读

相关 jquery动态设置滚动条位置

假设有一个div，里面会不断append新的内容，当超过一定高度后会出现滚动条。但是新内容append后，滚动条的位置始终不变，会在顶部。这种体验很不好，我们希望能够动态调

痛定思痛。/ 2021年06月22日 15:36/ 0 赞/ 670 阅读