vue3 关于自动滚动到底部的问题

已于 2022-08-29 18:01:08 修改
阅读量2.5k 收藏
点赞数
分类专栏： Vue常见问题 Vue 实现一些小功能 文章标签： 前端 javascript 开发语言 vue.js websocket
于 2022-08-29 16:18:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/News777/article/details/126586937
版权
本文介绍了在Vue3中处理自动滚动到底部的三种常见需求：添加消息、挂载后加载接口、WebSocket实时更新。通过使用JavaScript的滚动方法，确保数组最后一个元素始终在视口顶部。此外，补充说明了在处理类似消息展示场景时，可以利用CSS属性进行调整。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 需求

适用于以下几种需求

  • 添加一条消息，自动滚动最下方
  • 挂载时，加载接口后，自动滚动到最下方
  • websoket发送消息实时滚动最下方

2. 代码

// ============================
// 消息列表
// ============================
<div
        class
了解本专栏 订阅专栏 解锁全文 超级会员免费看
解决vue3项目中实现eltable滑动底部加载数据功能在‘.el-table__body-wrapper‘添加scroll监听失效导致scrollTop始终为0的问题
iOUNYU的博客
03-07 365
解决vue3项目中实现eltable滑动底部加载数据功能在'.el-table__body-wrapper'添加scroll监听失效导致scrollTop始终为0的问题
vue进入页面时滚动条始终在底部代码实例
10-17
在Vue.js应用中，有时我们需要实现一个功能，即当用户进入页面时，滚动条自动定位到页面底部。这种场景常见于聊天应用或者实时更新的信息流界面，用户打开页面时就能看到最新的内容。以下是一个详细的教程，指导如何...
[Vue3] 滚动条自动滚动到底部
Supposelll的博客
06-05 2937
在一个区域会依次打印log，随着log的加长，出现滚动条，而滚动条应该始终保持在最下方。点击回到顶部按钮，可以使滚动条回到最上方。
vue-chat-scroll, Vue.js 2.0的自动滚动到底部指令.zip
10-10
vue-chat-scroll, Vue.js 2.0的自动滚动到底部指令 vue-chat-scroll在元素中添加新内容时，滚动到元素底部的Vue.js 2的插件。安装 npm/纱线运行 npm install --save vue-chat-scroll ，或者 yarn add vue-chat
vue3设置自定义指令，滚动条自动滚动到底部
前端小陈的成长记录
07-11 5055
列表增加内容后，滚动条自动滚动到底部
vue3 滚动到底部
九段刀客的博客
06-15 1759
滚动到底部
vue3 自定义指令-滚动条自动滚动到底部
nxzjl的博客
11-16 862
自定义指令、滚动条自动置底
vue3，页面默认进去滚动到底部
最新发布
jyl4855的博客
08-08 1443
1、template部分。2、script部分。
vue实现动态添加数据滚动条自动滚动到底部的示例代码
08-27
Vue 实现动态添加数据滚动条自动滚动到底部的示例代码 在 Vue 中实现动态添加数据滚动条自动滚动到底部是一种常见的需求，特别是在聊天页面中。为此，我们可以使用 watch 方法来监听数据变量的变化，并动态添加滚动...
vue实现页面滚动到底部刷新
10-16
在Vue.js框架中，实现页面滚动到底部自动刷新功能，通常用于无限滚动或瀑布流布局，以便用户无需手动翻页即可加载更多数据。以下是一个基于Vue.js的示例，详细解释了如何实现这个功能： 首先，创建一个新的Vue实例...
vue3_聊天窗发送消息，滚动条自动定位到底部
qq_45104829的博客
07-25 1246
在做聊天-回复功能的时候，用户发送了消息，后台回复消息后，滚动条还是定位在用户发送的那条消息的位置；后台回复的消息会被遮挡；这时需要将滚动条定位到最下面。
vue3 h5进入页面后自动滚动到底部
qq_58340302的博客
03-30 3140
在做h5项目中的聊天页面时，需求是进入页面自动滚到底部，方便用户看到最新消息（因为消息是正序排列的，最新消息自然展示在底部）。
Vue实现动态添加数据滚动条自动滚动到底部
林中明月间丶
12-26 3940
【代码】Vue实现动态添加数据滚动条自动滚动到底部。
Vue3实现网页区域滚动到底部刷新
qq_53485256的博客
03-08 915
场景：使用一个区域展示列表数据，但是数据太多，全部拉下来费时间，所以先拉一部分数据，滚动到最底部再刷新一部分新数据，可以提高性能，类似分页。
Vue3.0 div随内容滚动到底部
Th_rob的博客
11-23 5474
Vue3.0 div随内容滚动到底部
滚动到底部（vue3）
qq_38210427的博客
07-01 277
【代码】滚动到底部（vue3）
Vue3随内容增加滚动到底部
Y2000104的博客
03-30 400
需要使用ref来进行实现。
vue 滚动条自动到底部
热门推荐
qq_42975998的博客
08-06 1万+
不用jquery，scrolltop不会不能赋值，使用 ref ，一句代码解决需求 注意：这里使用this.$nextTick是为了方便更多的人使用，在修改数据之后使用 $nextTick，可以在回调中获取更新后的 DOM 如果只是在一进入页面就滚到底部，在当前页面没有操作进行DOM更新，就可以省略this.$nextTick <template> <div clas...
vue3页面自动滚动到底部
05-24
你可以使用 `ref` 来获取页面底部的元素，并在页面更新时将页面滚动到该元素。以下是一个示例： ```html <!-- 消息列表 --> import { onMounted, onUpdated, ref } from &#39;vue&#39;; export default { setup...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

News777

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值