mounted() {    this.scrollToBottom();  },

  updated: function () {    this.scrollToBottom();  },

 scrollToBottom: function () {

          this.$nextTick(() => {

            var container = this.$el.querySelector("#chatBox-content-demo");

            container.scrollTop = container.scrollHeight;

          })

        }

必须在HTML上绑定 #chatBox-content-demo 这个id

vue保持滚动条在底部的更多相关文章

  1. vue 2 滚动条加载更多数据实现

    解析: 判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeigh ...

  2. js判断窗体或容器滚动条到底部

    NO1---jquery判断窗体滚动条到底部 $(window).scroll(function () {if ($(window).scrollTop() >= $(document).hei ...

  3. js判断滚动条到底部

    判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容 ...

  4. jquery判断div滚动条到底部

    jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop.scrollLeft.scrollHeight.其中 scrollHeight 属性,互联网上几乎搜 ...

  5. 一款jQuery打造的滚动条在底部滑出信息提示层

    一款jQuery打造的滚动条在底部滑出信息提示层, 当滚动鼠标滚轮,或者滚动条往下拉的时候,在右下角,弹出一个信息提示框. 有一点仿的是一个插件工具,就是网页中大家都长用到的友荐. 这款特效算一款简单 ...

  6. 判断滚动条到底部的JS代码

    这篇文章介绍了判断滚动条到底部的JS代码,有需要的朋友可以参考一下 判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrol ...

  7. js动态移动滚动条至底部示例

    使用js动态移动滚动条至底部. var currentPosition,timer;  function GoBottom(){  timer=setInterval("runToBotto ...

  8. Vue 如何实现一个底部导航栏组件

    参考网址: https://www.jianshu.com/p/088936b7b1bd/ Vue 如何实现一个底部导航栏组件 可以看到父组件是知道我点击了底部TabBar的哪个item的. 实现 实 ...

  9. 写一个vue的滚动条插件

    组件源码如下: vue-scroll.vue <template> <div class="vue-scroll" ref="vueScrollW&qu ...

  10. Vue.js 桌面端自定义滚动条组件|vue美化滚动条VScroll

    基于vue.js开发的小巧PC端自定义滚动条组件VScroll. 前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue ...

随机推荐

  1. 西湖论剑2023-mp3[wp]

    一 题目描述 二 解题步骤 1.分析文件 (1)放入Audacity中查看频谱信息无果 (2)010editor中查看文件结构 文件尾部存在PNG文件尾,搜索png文件头 将该png文件复制提取出来, ...

  2. java中List的浅拷贝与深拷贝

    List浅拷贝 众所周知,list本质上是数组,而数组的是以地址的形式进行存储. 如上图将list A浅拷贝给list B,由于进行的是浅拷贝,所以直接将A的内容复制给了B,java中相同内容的数组指 ...

  3. Oracle UNDO表空间的管理

    Oracle UNDO表空间的管理 UNDO表空间的管理是Oracle DBA最重要的日常工作之一,UNDO表空间用来暂时存储DML操作的数据,其主要作用有: 1.事务回滚 2.实例恢复 3.读一致性 ...

  4. Sql Sugar 拾遗

    SqlSugar 拾遗 更新操作 //UpdateColumns:只更新某些列 db.Updateable(entity).UpdateColumns(it => new { it.Name } ...

  5. Linux下设置目录或文件可读写，但不可以删除权限

    例如:现在/home目录下有 :目录 data 和 文件 test.txt (1)设置/home/test.txt可读写但是不可以删除命令(文件设置): sudo chattr +a /home/te ...

  6. linux基本命令说明参数

    linux基本命令说明参数 标签(空格分隔): Linux 1.# 表示权限用户(如:root),$ 表示普通用户 开机提示:Login:输入用户名 password:输入口令 用户是系统注册用户成功 ...

  7. web.py 中的分页设计

    1.定义分页类 class Pagination(object): ''' 分页类 参数: per_page:每页数量 total_data:总数目 cur_page:当前页. 用法:(flask,h ...

  8. sxt_(008_011)_servlet

    一.servlet简介 Servlet(Server Applet)是Java Servlet的简称,称为小服务程序或服务连接器,用Java编写的服务器端程序,具有独立于平台和协议的特性,主要功能在于 ...

  9. efk部署

    转载: https://www.cnblogs.com/liweiboy/p/16100002.html

  10. vue初始化data数据

    初始化data this.$data = this.$options.data() 初始化data中form this.$data.form = this.$options.data().form