jQuery——滚动条底部显示

最新推荐文章于 2023-10-03 06:34:52 发布

原创最新推荐文章于 2023-10-03 06:34:52 发布 · 545 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#怎样让滚动条在添加内容时一直显示在底部

jQuery—滚动条底部显示专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一个实用的jQuery技巧，用于实现在动态添加内容时，滚动条自动定位到div底部的功能。此方法确保了每次更新数据后，用户都能立即看到最新的信息。

这里的 #content 代表的是带有滚动条的div，下面的代码实现了在有数据不团添加进去时滚动条一直在div底部的功能。

这里的这段代码需要放置在 动态添加数据的jQuery方法体里面。（为了保证每一次添加一次数据都要更改一下滚动条的位置）

  $('#content').scrollTop($('#content')[0].scrollHeight);

实例：

function broadcastInvake(data) {
	    var mess = data.body;  
	    var nick = data.nick;  // 名字时间
	    var uid = data.uid;   
	    var time = data.time;  //时间
	    mess = replace_em(mess);   //消息体
	    var html = '<div class="information"><p style="text-align: center"><span class="label label-info">'+time+'</span> </p><div id="imgname" ><div class="xingming">'+nick+'</div><img class="touxiang" src="./image/ooo.jpg" > </div><div class="send"><div class="arrow"></div><div class="wenzi">'+mess+'</div></div></div>';
	    $("#content").append(html);   //jQuery动态添加数据
	    $('#content').scrollTop($('#content')[0].scrollHeight);
	    

	};