jquery动态设置滚动条位置

痛定思痛。 2021-06-22 15:36 645阅读 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 条评论，645人围观）

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

相关阅读

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

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

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

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

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

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

相关 winfrom 控制 webbroser 滚动条位置

//获取滚动条位置 HtmlDocument document = webBrowser1.Document; string top = docum

我就是我/ 2022年08月07日 21:28/ 0 赞/ 202 阅读

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

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

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

相关 jquery 滚动条滚动到底部

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

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

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

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

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

相关 vue返回记住滚动条位置

assets/js/common.js export const Storage = { set: function (key, d

喜欢ヅ旅行/ 2022年01月27日 17:37/ 0 赞/ 410 阅读

相关 textarea设置滚动条

[http://www.divcss5.com/html/h50395.shtml][http_www.divcss5.com_html_h50395.shtml] [ht

╰+攻爆jí腚メ/ 2021年11月09日 05:58/ 0 赞/ 501 阅读

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

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

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

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

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

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