vue实现动态添加数据滚动条自动滚动到底部

野性酷女 2022-06-17 06:41 1067阅读 0赞

> 在使用vue实现聊天页面的时候，聊天数据动态加到页面中，需要实现滚动条也自动滚动到底部。这时我找到网上有个插件 `vue-chat-scroll`

[https://www.npmjs.com/package/vue-chat-scroll][https_www.npmjs.com_package_vue-chat-scroll]

但是安装后发现是用不了的，报错信息如下：

VM14383:27 [Vue warn]: Failed to resolve directive: chat-scroll 
    (found in <Hello>)

这个一直找不到原因，可能是我vue的版本是2.2不支持吧。。。后来找到一个解决办法：

> 添加watch方法，监听数据变量的变化，动态添加滚动条，一开始我代码如下：

watch: {
        chatlog() {
            var container = this.$el.querySelector("#chatContainer");
            console.log(container);
            container.scrollTop = container.scrollHeight;
         }
      }

但是发现滚动条都是滚动到倒数第二条数据上，所以需要如下代码来解决：

watch: {
       chatlog() {
         console.log("chatlog change");
         this.$nextTick(() => { var container = this.$el.querySelector("#chatContainer"); console.log(container); container.scrollTop = container.scrollHeight; }) // document.getElementById('chatContainer').scrollTop = document.getElementById('chatContainer').scrollHeight+150; } }

相应在ul中添加一个id属性为chatContainer

[https_www.npmjs.com_package_vue-chat-scroll]: https://www.npmjs.com/package/vue-chat-scroll

发表评论取消回复

表情：

评论列表（有 0 条评论，1067人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 监听滚动条是否滚动到底部

【代码】js 监听滚动条是否滚动到底部。

喜欢ヅ旅行/ 2024年04月22日 15:07/ 0 赞/ 39 阅读

相关 jquery 判断div滚动条是否滚动到底部

//div的滚动条，判断滚动条是否到底部 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

清疚/ 2022年09月25日 03:23/ 0 赞/ 228 阅读

相关滚动条到底部

var totalheight = 0; function loadData() \{ totalheight = parseFloat($(window

迷南。/ 2022年08月07日 03:33/ 0 赞/ 200 阅读

相关 vue实现动态添加数据滚动条自动滚动到底部

> 在使用vue实现聊天页面的时候，聊天数据动态加到页面中，需要实现滚动条也自动滚动到底部。这时我找到网上有个插件 `vue-chat-scroll` [https://ww

野性酷女/ 2022年06月17日 06:41/ 0 赞/ 1068 阅读

相关 JS控制滚动条的位置 JS控制TextArea滚动条自动滚动到最下部

S控制滚动条的位置 window.scrollTo(x,y); 竖向滚动条置顶 window.scrollTo(0,0); 竖向滚动条置底

青旅半醒/ 2022年06月16日 09:10/ 0 赞/ 361 阅读

相关 js判断滚动条是否到底部

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

灰太狼/ 2022年06月06日 02:24/ 0 赞/ 260 阅读

相关获取div滚动条滚动到底部的事件[转]

关于 jQuery 的 Div 标签的滚动条的概念，没有几个人能够完全、正确搞明白的。我知道很多人不同意我的观点。但是如果去百度上搜素，与 jQuery 滚动条有关

我会带着你远行/ 2022年05月17日 01:17/ 0 赞/ 854 阅读

相关 jquery 滚动条滚动到底部

[菜鸟教程-prop][-prop] [菜鸟教程animate][animate] $("chartContainer").animate({scrollTop:$

àì夳堔傛蜴生んèń/ 2022年04月22日 13:14/ 0 赞/ 242 阅读

相关 vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

//路由跳转后，页面回到顶部 router.afterEach(() => { document.body.scrollTop = 0;

短命女/ 2022年04月17日 03:39/ 0 赞/ 651 阅读

相关 jquery让页面滚动到底部

function scrollToEnd(){//滚动到底部 var h = $(document).height()-$(window

谁践踏了优雅/ 2021年09月12日 05:38/ 0 赞/ 494 阅读