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. Django的反向解析

    Django的请求生命周期是指用户在浏览器访问网页时,Django根据网址在路由列表里查找相应的路由,在从路由里找到视图函数或视图类进行处理,将处理结果作为相应内容返回浏览器并生成网页内容. 这个生命 ...

  2. MySQL 增加timestamp 列都是000000的时间

    问题: 在MySQL 用工具navicat 给表增加 类型为 timestamp 的列的时候 默认值没有具体设置 默认值使用当前时间 CURRENT_TIMESTAMP 函数 导致生成的默认是0000 ...

  3. P9033题解

    P9033「KDOI-04」XOR Sum 题解 题目链接 传送门 题意简述 构造一个长度为 \(n\),值域为 \([0,m]\) 的异或和为 \(k\) 的序列,如果不存在则输出 \(-1\). ...

  4. （app笔记）关闭monkey进程命令

    1.查询进程命令:adb shell ps | findstr "monkey" 2.杀死进程命令:adb shell kill PID(15015是进程ID,不是所有Monkey ...

  5. pychars的使用

    1|0安装 pyecharts 兼容 Python2 和 Python3.目前版本为 0.1.2 pip install pyecharts 2|0入门 首先开始来绘制你的第一个图表 from pye ...

  6. keepalived+nginx+应用

    达到的效果就是,每个keepalived中都有一个weight,这个数最大的作为主节点.意外挂掉就另一个升为leader,比如开始一个6,一个5,挂一次这个数减2.6挂一次再启动就是5,4了,两台机器 ...

  7. xpath、css元素定位

    xpath 1.利用元素唯一属性 //*[@id='xxx'] 2.属性与逻辑结合 解决元素之间多个相同属性重名问题 //*[@id='xxx' and @class='xxx'] 3..//*[te ...

  8. 利用Opencv+Python 实现二维码识别

    pip3 install pyzbar   准备工作: 二维码图片,我这里直接打印在了一张A4纸上,或者直接在草料网站上生成 草料二维码生成器,存放在手机上进行显示.在安装条码扫描库的时候大家注意:z ...

  9. sxt_(001_002)_web简介

    一.web 网络.网页二.web应用 运行在网络上的应用程序.三.网络应用的分类 3.1 c/s:client/server 如:qq.yy.lol 优点: 个性化更容易实现 更安全 占用网络资源少. ...

  10. docker+gunicorn+fastapi部署

    一.准备工作 1.先确保项目可以正常运行 2.使用pip freeze导出第三方库 3.在项目根目录新建pip.conf文件,写入一下内容 [global] index-url=http://pypi ...