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

最新推荐文章于 2024-07-05 09:50:50 发布
最新推荐文章于 2024-07-05 09:50:50 发布
阅读量8.7k 收藏 6
点赞数 1
分类专栏： 后端 JAVA & PHP 前端 HTML+JS+CSS 文章标签： 滚动条 jquery 即时聊天
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenyoper/article/details/52917347
版权

陈永鹏的微博

陈永鹏的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



性零糖



chenYoper-陈永鹏
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
简单聊天框布局+滚动条自动到底
weixin_44940364的博客
02-24 621
聊天对话框滚动条自动到底
js滚动条自动到底(聊天框效果)
shinjie1210的博客
12-01 1636
今天同事写个小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.
做聊天工具的时候滚动条保持在最底部
09-30
开发聊天程序，我们需要将将滚动条保持在最底部，比如聊天窗口，最新发出和收到的信息要显示在最下方，如果要看到最下方的内容，就必须保证滚动条保持在最底部。
使用Html5搭建聊天界面定位到最底部的聊天信息
wsxujiacheng的博客
07-18 8554
在日常的聊天工具中，我们打开一个聊天会话首先定位到的是最近的聊天信息，即聊天DIV布局的最底部实现方法使用JS原生提供的Element.scrollIntoView()可以定位到指定元素的位置实现代码<div id='messageList' style='overflow-y:auto;overflow-x: hidden;'> <div id='message me'></div>
div上下来回自动滚动，解决setInterval出现抖动
最新发布
小白的博客
07-05 319
backtrack：触底返回方式（true---缓慢返回；false----1秒到顶）interval：滚动时间。id：当前滚动元素的id。mouse：鼠标悬停。
消息回复时 滚动条自动滚动到最底部
weixin_58207509的博客
12-16 1563
当聊天时,有后续新消息的话总将滚动条滚动到最底部。 第一步 获取滚动条所在的dom元素并且存储 // 用于操作聊天列表元素的引用 const chatListRef = useRef(null) // 获取dom元素 <div className="chat-list" ref={chatListRef}> 第二步通过 useEffect 监听聊天数据变化，对聊天容器元素的 scrollTop 进行设置： // 监听聊天数据的变化，改变聊天容器元素的 scrollTop 值让页..
【移动端聊天功能模板】Vue实现H5聊天系统，实现上下固定中间滚动布局，微信授权功能，自动滚动到底部【详细注释，一看就会】
seeeeeeeeeee的博客
08-03 8537
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...
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
09-01
在网页开发中，有时我们需要实现一个功能，使得页面中的某个具有滚动条的div元素自动滚动到最底部，以便用户能够即时查看新加载的内容，比如在实时聊天应用中。本文将介绍三种实现这一功能的方法。 方法一：使用锚...
仿QQ的简单聊天工具修改了自动滚动到最底层
07-17
这需要监听消息队列，一旦有新消息，就触发滚动条移动到底部的动作。 2. **用户体验**：自动滚动的同时，应确保用户不会丢失当前阅读的位置。在某些情况下，用户可能正在查看历史消息，这时应提供一个选项，让用户...
iframe 上下滚动条如何默认在下方实现原理
09-05
通过这种方式，我们可以确保iframe的滚动条始终位于最下方，即时更新以展示新添加的聊天记录，从而提供类似QQ聊天窗口的用户体验。请注意，实际应用中可能需要根据具体的DOM结构和事件处理机制进行适当的调整。
uni-app 社交 下拉加载历史消息记录，滚动到下拉之前，不闪
05-19
"uni-app 社交 下拉加载历史消息记录，滚动到下拉之前，不闪"这个主题关注的是如何在移动应用中实现平滑的下拉加载功能，同时避免页面在加载新内容时出现闪烁现象，确保用户在查看聊天历史时能有流畅的交互体验。...
uniapp 实现聊天页面 textarea固定在底部且高度自增
six_teen的博客
01-15 1万+
在使用uniapp实现一个IM即时通讯系统的时候聊天界面是十分重要的，参考微信QQ的界面，决定模仿一个差不多的出来。 对于消息内容，肯定就是使用scroll-view组件了，发送消息的输入框则固定在底部，且输入框使用textarea组件。 页面效果如下（模拟器的原因导致软键盘附近有黑色）： textarea自动增高，当内容输入过多会，输入框会向上增高一点，与QQ的输入是差不多的。 ps: 上面的黑色背景是scroll-view，此处并没有填充消息 对于这种效果，在APP端是比较好实现的 页面: <
网页底部固定的两种方式
Tz。
04-27 977
小小的需求，不管内容页面的多少。始终要底部固定在页面窗口的底部。 实现方法两种，道理简简单单，公司的电脑妈的一打开github就死机。真是无力吐槽了。。。方法一： 判断高度$(function() { footerAuto(); }) function footerAuto() { var _wh = $(window).height();
【踩坑分享】滚动条保持在最底部的方法，做聊天室的时候会用到
✈ 正在努力 の 寒江（StudiousTiger) ✌ 呐 ✈
03-19 5777
最近在做一个聊天室，结果新发送的消息不能【置于底部】，找了很多方法，最后总结出最完美（主观）的方法，给大家分享一下 核心代码： 目标div.scrollTop = 目标div.scrollHeight; 例子： <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <titl
php 自动滚动显示,在聊天室中，让显示内容栏的滚动条一直在下面。-PHP教程,PHP应用...
weixin_42300798的博客
03-11 130
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;}...
php滚动条怎么用,如何让滚动条自动滚到最底部
weixin_34303763的博客
03-12 442
让滚动条自动滚到最底部的方法：首先在DIV的底部添加一隐藏元素“element”；然后调用“element.scrollIntoView()”方法；最后使元素滚动到可视区域即可。如何让滚动条自动滚到最底部？让DIV中的垂直滚动条自动滚到最底部在聊天窗口中当消息增多超过消息窗体DIV的高度时就会出现滚动条，但此时滚动条在绝大多数浏览器中都始终位于DIV的顶部，这样就会导致之后的消息看不见，必须往下拖...
php聊天室滚动条永远在最下方,js实现将div等滚动条(scrollbar)保持在最底部的方法...
weixin_39849070的博客
03-21 262
很多时候我们要让程序的滚动条保持在底部,如聊天室.下面将利用div+css+javascript实现保持滚动条在最底部.代码如下,.cdiv{background-color: white;height: 100px;width: 380px;padding-left: 0;overflow-y: scroll;position: relative;word-wrap: break-word;ov...
解决即时通讯发送图片时滚动条不能完全滚到底部问题（简单粗暴）
weixin_41618712的博客
08-20 1212
以下是滚动条置底的函数，发送文字和文件的时候可正常使用。 但发送图片时，因为图片还没完全加载完就调用了函数，所以滚动条并没有完全拉到底。 scrollBottom() { this.$nextTick(() => { this.$refs["myScrollbar"].wrap.scrollTop = this.$refs[ "myScrollbar" ].wrap.scrollHeight; }); }, 因为聊天消息中，图片大小经过处理，每张图
让DIV的滚动条自动滚动到最底部的方法
08-31
要让 `<div>` 元素的滚动条自动滚动到最底部，可以使用以下方法： 1. 使用 JavaScript/jQuery：通过设置 `scrollTop` 属性将其设置为 `scrollHeight` 属性的值。 ```javascript // 使用纯 JavaScript var divElement = document.getElementById("myDiv"); divElement.scrollTop = divElement.scrollHeight; // 使用 jQuery $("#myDiv").scrollTop($("#myDiv")[0].scrollHeight); ``` 2. 使用 CSS：通过将 `overflow` 属性设置为 `auto` 并且使用 `scroll-bottom` 值来实现。 ```css #myDiv { overflow: auto; scroll-behavior: smooth; /* 使滚动平滑进行 */ } /* 滚动到底部 */ #myDiv:target { scroll-margin-bottom: 0; } ``` 使用其中一种方法，你可以将 `myDiv` 替换为你实际使用的 `<div>` 元素的 ID。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值