网页版即时聊天让滚动条自动滚到最底部

最新推荐文章于 2025-03-06 09:36:52 发布
原创 最新推荐文章于 2025-03-06 09:36:52 发布 · 9k 阅读 · 6 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#滚动条 #jquery #即时聊天
本文介绍了一种解决网页版即时聊天系统中滚动条不自动更新的问题，通过使用jQuery的一句简单代码，确保每次发送或接收消息时滚动条都能自动跳至底部，从而改善用户体验。

陈永鹏的微博

陈永鹏的csdn博客地址：http://blog.csdn.net/chenyoper

陈永鹏的博客园地址：http://www.cnblogs.com/Yoperchen/


最近在做一个网页版的即时聊天系统(其实是拿别人开源的系统来改造)。遇到一个小问题，就是当发送信息达到一定数量的时候，滚动条不会自动跳下去，如下这样子：



这样就无法及时看到聊天信息而且每看一次最新信息就要手动划一下滚动条。用户体验极差。

原谅我第一次做这个东西。


好吧，其实也很简单。

jquery下只需要一句

就是在发送信息和接收信息的时候，加上

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


记得#div有一个固定的宽度以及overflow-y=auto.



网页版聊天地址








本文作者:Yoper

邮箱:chen.yong.peng@foxmail.com



性零糖



使用Html5搭建聊天界面定位到最底部的聊天信息
wsxujiacheng的博客
07-18 8939
在日常的聊天工具中，我们打开一个聊天会话首先定位到的是最近的聊天信息，即聊天DIV布局的最底部实现方法使用JS原生提供的Element.scrollIntoView()可以定位到指定元素的位置实现代码<div id='messageList' style='overflow-y:auto;overflow-x: hidden;'> <div id='message me'></div>
消息回复时 滚动条自动滚动到最底部
weixin_58207509的博客
12-16 1814
当聊天时,有后续新消息的话总将滚动条滚动到最底部。 第一步 获取滚动条所在的dom元素并且存储 // 用于操作聊天列表元素的引用 const chatListRef = useRef(null) // 获取dom元素 <div className="chat-list" ref={chatListRef}> 第二步通过 useEffect 监听聊天数据变化，对聊天容器元素的 scrollTop 进行设置： // 监听聊天数据的变化，改变聊天容器元素的 scrollTop 值让页..
【移动端聊天功能模板】Vue实现H5聊天系统，实现上下固定中间滚动布局，微信授权功能，自动滚动到底部【详细注释，一看就会】
seeeeeeeeeee的博客
08-03 1万+
vue-vant实现仿微信聊天界面，上下固定中间滚动自适应高度。移动端聊天功能，H5聊天功能实现。
聊天窗口内容滚动到底部的方法scrollTop和scrollIntoView
热门推荐
越思考越清晰
03-14 1万+
测试内容样式：&lt;style type="text/css"&gt; #container{ overflow-y:auto; overflow-x:hidden; height:150px; border:1px solid red; width:350px; } html,body{margin:0px;padding:0px;font...
uniapp 实现聊天页面 textarea固定在底部且高度自增
six_teen的博客
01-15 1万+
在使用uniapp实现一个IM即时通讯系统的时候聊天界面是十分重要的，参考微信QQ的界面，决定模仿一个差不多的出来。 对于消息内容，肯定就是使用scroll-view组件了，发送消息的输入框则固定在底部，且输入框使用textarea组件。 页面效果如下（模拟器的原因导致软键盘附近有黑色）： textarea自动增高，当内容输入过多会，输入框会向上增高一点，与QQ的输入是差不多的。 ps: 上面的黑色背景是scroll-view，此处并没有填充消息 对于这种效果，在APP端是比较好实现的 页面: <
网页底部固定的两种方式
Tz。
04-27 1081
小小的需求，不管内容页面的多少。始终要底部固定在页面窗口的底部。 实现方法两种，道理简简单单，公司的电脑妈的一打开github就死机。真是无力吐槽了。。。方法一： 判断高度$(function() { footerAuto(); }) function footerAuto() { var _wh = $(window).height();
【踩坑分享】滚动条保持在最底部的方法，做聊天室的时候会用到
✈ 正在努力 の 寒江（StudiousTiger) ✌ 呐 ✈
03-19 7094
最近在做一个聊天室，结果新发送的消息不能【置于底部】，找了很多方法，最后总结出最完美（主观）的方法，给大家分享一下 核心代码： 目标div.scrollTop = 目标div.scrollHeight; 例子： <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <titl
聊天室滚动条的相关设置
最新发布
2301_77967998的博客
03-06 238
【代码】聊天室滚动条的相关设置。
php滚动条怎么用,如何让滚动条自动滚到最底部
weixin_34303763的博客
03-12 552
让滚动条自动滚到最底部的方法：首先在DIV的底部添加一隐藏元素“element”；然后调用“element.scrollIntoView()”方法；最后使元素滚动到可视区域即可。如何让滚动条自动滚到最底部？让DIV中的垂直滚动条自动滚到最底部在聊天窗口中当消息增多超过消息窗体DIV的高度时就会出现滚动条，但此时滚动条在绝大多数浏览器中都始终位于DIV的顶部，这样就会导致之后的消息看不见，必须往下拖...
jquery div 内容自动滚动
weixin_40350013的博客
07-26 330
jQuery实现div内容自动滚动 作为一名经验丰富的开发者，我很高兴能为你提供帮助。在这篇文章中，我将向你介绍如何使用jQuery实现div内容的自动滚动。这将使你能够创建一个动态且引人入胜的网页效果。 流程图 首先，让我们通过一个流程图来了解实现div内容自动滚动的整个流程： #render_12_3528509687...
php聊天室滚动条永远在最下方,js实现将div等滚动条(scrollbar)保持在最底部的方法...
weixin_39849070的博客
03-21 343
很多时候我们要让程序的滚动条保持在底部,如聊天室.下面将利用div+css+javascript实现保持滚动条在最底部.代码如下,.cdiv{background-color: white;height: 100px;width: 380px;padding-left: 0;overflow-y: scroll;position: relative;word-wrap: break-word;ov...
php 自动滚动显示,在聊天室中，让显示内容栏的滚动条一直在下面。-PHP教程,PHP应用...
weixin_42300798的博客
03-11 215
var autoscrollon = 1;var scrollonfunction;var scrollofffunction;function scrollit(){if(!parent.d.document.inputform.as.checked){autoscrollon=0;return true;}else {autoscrollon=1;startup();return true;}...
js滚动条自动到底(聊天框效果)
shinjie1210的博客
12-01 1931
今天同事写个小demo的时候遇到的,太久没有写原生了都快忘了,就随手写一下记录一下大概思路 效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width.
解决即时通讯发送图片时滚动条不能完全滚到底部问题（简单粗暴）
weixin_41618712的博客
08-20 1465
以下是滚动条置底的函数，发送文字和文件的时候可正常使用。 但发送图片时，因为图片还没完全加载完就调用了函数，所以滚动条并没有完全拉到底。 scrollBottom() { this.$nextTick(() => { this.$refs["myScrollbar"].wrap.scrollTop = this.$refs[ "myScrollbar" ].wrap.scrollHeight; }); }, 因为聊天消息中，图片大小经过处理，每张图
聊天窗口滚动底部-scrollIntoView
LinBM123的博客
08-11 553
scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视窗中。
聊天页面回复消息自动滑动到底部
qq_36738092的博客
12-02 805
聊天页面回复消息自动滑动到底部
让div的滚动条滑动到最底部（适用于网页版聊天消息自动滚动）
Sobered的博客
05-19 2478
一、本人在做聊天功能模块,需要输入消息后，让消息框自动滚到最下面。有很多方法，这里列举几个: ①使用js在DOM树指定消息框元素中增加a标签元素，触发发送消息并且成功发送后，模拟点击a标签。 ②使用消息框标签属性直接设置到最低部。 ③实时使用js计时器更新。 ④etc... 如下: div是你的展示聊天信息的标签 ...
聊天窗口使滚动条加载时即显示在底部
aadyf的博客
10-13 266
$('html,body').animate({scrollTop:$(document).height()},50);
Vue聊天框----在收发消息，组件加载成功后，滚动条自动滑到底部
cyl97的博客
03-11 760
个人学习记录，备忘。 mounted() { this.scrollToBottom() }, update() { this.scrollToBottom() }, method(){ scrollToBottom() { this.$nextTick(() => { // scrollTop被卷上去的高度，scrollHeight内补被隐藏的实际元素高度 带滚动条的元素.scrollTop = 带滚动条的元素.scrollHeight
Vue信息聊天框首次进入有图片加载滚动到最底部
yuanqi3131的博客
12-16 1200
场景：我们有个聊天室，进入聊天室的话我们的需求是，进入聊天室，滚动到最新信息底部，如果是文字的话，很简单，异步获取数据，然后设置滚动高度即可，我们的使用的是VUE，我们先来操作一下： <template> <div> <div id="service"> <!-- 此处为聊天框内容--> </div> </div> </template> <script> export default {
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值