聊天室功能-消息过多时, 怎么让滚动条位于最底部?

最新推荐文章于 2023-10-13 18:34:49 发布
最新推荐文章于 2023-10-13 18:34:49 发布
阅读量460 收藏
点赞数
分类专栏： web项目开发 编码技巧 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46873254/article/details/119576736
版权

在这里插入图片描述



// 滚动条自动滚到最底部
this.$refs.char.scrollTop = this.this.$refs.offsetHeight

在这里插入图片描述

SpringSir
关注
专栏目录
Vue项目中让滚动条始终处于最底部
郭宝的博客
06-16 2795
效果图： 核心代码：
vue切换路由的时候，如何让右侧滚动条滚动到顶部呢？
猿小白的博客
02-06 7327
使用vue切换页面的时候，发现右侧的滚动条的位置似乎存在缓存似的，当右侧滚动条默认在顶部，切换页面的时候，位置停留在顶部，但当右侧滚动条的停留位置不是在顶部的时候，右侧滚动条停留的位置就会是上一个页面右侧滚动条停留的位置，因此，需要寻找一种方法解决这个问题。 下面是解决办法，只需要在router/index.is 里面增加一个scrollBehavior函数，并且指定对应位置即可，x=0,y=0时，默认为顶部，当然你想要设置为其它的位置也是可行的，具体改变对应的x和y的值即可。 // router..
聊天室文本信息始终在底部，上拉固定不滚动
qq_42551474的博客
03-12 571
实现聊天室文本信息始终在底部，并且上拉固定不滚动，下拉后自动滚动 html <scroll-view id="scrollview" class="discuss_info" scroll-y="true" style="height:248px;overflow: auto;" :scroll-with-animation="true" :scroll-top="scrollTop" @scroll="binddragstart"> <view class=
vue聊天滚动到底部
MYG_G
12-29 597
vue聊天滚动到底部 技术框架：vue+即时通讯TIM 注意：this.$nextTick，这个方法是vue组建渲染完以后执行的方法（利用这个方法） 1.滚动到底部方法： scrollMessageListToButtom() { let messageListNode = this.$refs['message-list'] if (!messageListNode) { return } // 元素.scrollTop(滚动高度) = 元素.scrollHeight(滚动条高度)
聊天室 的滚动逻辑
lidog的博客
05-21 461
聊天室 的滚动逻辑是 1， 自己发送信息时  滚动保持在底部； 2， 接受信息时，判断当前滚动条是否在底部，是的话，就保持在底部。不是的话就不滚动。
vue表格自动滚动且大小自适应（vh）, 自定义
weixin_44042792的博客
03-11 1461
<template> <div class="div-table"> <div class="div-table-header" :style="{ height: height + 'vh', lineHeight: height + 'vh' }" > <span>序号</span> <span>姓名</span> <s...
【踩坑分享】滚动条保持在最底部的方法，做聊天室的时候会用到
✈ 正在努力 の 寒江（StudiousTiger) ✌ 呐 ✈
03-19 6012
最近在做一个聊天室，结果新发送的消息不能【置于底部】，找了很多方法，最后总结出最完美（主观）的方法，给大家分享一下 核心代码： 目标div.scrollTop = 目标div.scrollHeight; 例子： <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <titl
【Element-plus】如何让滚动条永远在最底部（支持在线演示）
Emily's Blog
10-13 5521
在某些场景下，你可能希望滚动条保持在最底部，以确保用户始终看到最新的内容或信息。通过短短几行代码即可实现这个功能，文章内含实现思路以及支持在线演示。
elementUI el-table 默认滚动条在表格的最底部
grootbaby
11-07 3514
elementUI 框架，获取不到表格里面的某个元素的 id，但是 el-table 里有个 bodyWrapper 它指向的是 el-table 的表格内容部分，存在 scrollTop，scrollHeight 属性，所以可以用下面方法来实现滚动条在底部的效果。（备注： 需给对应的el-table 设置ref 属性，，本案例中ref 设置为editTable）另外，如果要在不同屏幕下表格高度需要适应屏幕的话，需要用到 window.onresize 函数。
uniapp + vue 定位聊天最新消息 实现滚动条一直在元素的最底部
精灵码农
12-13 2778
使用 scroll-view 配合uni.createSelectorQuery() 以及boundingClientRect()即可实现； <scroll-view id="scrollview" class="chat-window" scroll-y="true" :style="{height: style.contentViewHeight + 'px'}" :scrol...
vue-cli网页聊天室：当聊天室有新消息时，控制滚动条滚动到底部
一捆铁树枝的博客
01-10 2767
做一个网页聊天室页面，功能需求是：当有新消息出现在聊天室页面时，控制页面滚动条滚动到页面底部； 聊天室页面代码如下： data中的消息列表； messageList: [{ Character: "0", //客服 message: "你好,有什么需要我帮忙的吗？" }, { ...
点击页面的“回到顶部”按钮，页面滚动到顶部的几种方法，以及设置 scrollTop问题
感恩、奋进、自信
11-28 4973
点击页面的“回到顶部”按钮，页面滚动到顶部的几种方法 一、使用锚点 1）使用默认链接锚点，设置a链接的href属性值为"#top"即可实现 <div><a href=" ">返回顶部</a ></div> 2）href指向特定的id <div id=“element1”>元素1</div> <a href=“#element1”>回到元素1</a > 二、scrollTop属性: 元素未滚动时，sc..
vue聊天功能之滚动条自动定位到底部
weixin_33909059的博客
10-29 1821
一、问题描述 首次进入聊天窗口，数据加载之后先显示最早消息，后显示最新消息，也就是数据加载完之后，延迟了一个时间滚动条才自动定位到最底部。 二、解决方案 如果数据在刚好加载完的时候滚动条就定位到了最底部就好了，就不会在进入聊天窗口之后还看到滚动条在往下滚动，出现的问题就是因为获取数据和设置滚动条位置的代码不是同步的不是按顺序执行的，后者加了定时器。 像微信聊天窗口一样，一进入到...
网页版即时聊天让滚动条自动滚到最底部
11-02 8809
最近在做一个网页版的即时聊天系统。遇到一个小问题，就是当发送信息达到一定数量的时候，div的滚动条不会自动跳下去..
聊天框 让滚动条保持到最底端的一种方式 scrollTop!
鹿丸oo
07-25 5703
通过使用scrollTop来实现  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.
vue中动态添加数据时控制滚动条在底部_Vue实现渲染数据后控制滚动条位置(推荐)...
weixin_34284072的博客
02-11 520
需求场景如下:实现了消息发送，如果容器内消息过多，会出现滚动条，最新的消息位于最底部，不能及时出现在可视区域内，此时就需要在渲染列表后，将滚动条的位置定位到最底部。先来看看最终实现的效果实现思路渲染完数据后，通过refs对象获取消息容器的实际高度 将滚动条的设置到最底部实现过程sendMessage: function (event) {// 数据渲染this.senderMessageList....
vue2.0_模拟聊天室，实现发送的消息始终出现在容器的最底部（this.$nextTick用法）
QiuRenBB的博客
03-10 1447
前言   今天闲着无聊，抽空做了一个简易的PC端聊天对话窗，模仿微信的聊天UI。本来，我以为做这个不是轻轻松松么？结果，现实狠狠的给了我一巴掌。我发现在我发送出最新消息的时候，消息展示的页面没有第一时间来到最底部最新消息位置。好，针对这个问题，我直接运用了大家都会用的方式，就是通过ref获取该设置了滚动条的元素，然后在发送消息的点击事件方法当中写：this.$ refs.div.scrollTop=this.$ refs.div.scrollHeight。本来我想着，这问题不就gameover了吗？但是一测
vue-virtual-scroller 怎么让滚动条滚动到底部
最新发布
10-29
要让滚动条滚动到底部，你需要使用它的 `scrollToBottom` 方法。首先确保你在组件实例上已经绑定了 `virtualScroll` 的 ref： ```html <!-- ...你的列表内容 --> export default { setup() { const ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值