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. mybatis面试资料

    1.#{}和${}的区别 #{} 数据类型检查: 若检测到字符串类型,就加上引号: 若检测到数值类型,就不加引号. 安全检查: 若变量的值带有引号,会对引号进行转义处理,这样可以防止sql注入. ${ ...

  2. ggplot2绘制饼图

    # 加载 ggplot2 包 library(ggplot2) # 加载数据 data <- data.frame(category = c("A", "B&quo ...

  3. 编译报错Could NoT find Threads (missing: Threads FOUND)

    解决方法1: 原来的命令行加上-lpthread 解决方法2: -DCMAKE_THREAD_LIBS_INIT=-lpthread

  4. 文件监控利器-Jnotify

    监听的文件变化的方式有很多,但是比较完美的还是jNotify https://jnotify.sourceforge.net/ 对比一下监控方式的优缺点 方式 缺点 java原生watch 可能对文件 ...

  5. 初学银河麒麟linux笔记 第五章 windows中开发的QT程序适配linux的修改——外部控件重新调用

    本人在WINDOWS系统中使用了"飞扬青云"的控件 https://gitee.com/feiyangqingyun/QUCSDK 由于系统移植,调用库应改为linux系统,首先下 ...

  6. RabbitMQ异常注意 reply-code=404, reply-text=NOT_FOUND - no exchange 'topic' in vhost '/', class-id=50

    1.问题排查: 第一次,一定要先启动Provider再启动Consumer!!! rabbitmq为初始状态没有队列信息,然后我又没有启动consumer,所以导致provider找不到queue和e ...

  7. ts language service

  8. vue 分页显示 引用Element框架

    VUE组件 父页面-子组件-传值 单表查询图片上传: 注释为简单方法 图片显示方法: 红框处应该为地址+存图片的文件夹名  +当前图片的值 在vue中引用Element需要的步骤 1.在终端中输入网址 ...

  9. JWT 工具类的编写

    导入JWT pom依赖 <!--JWT 依赖--><dependency> <groupId>io.jsonwebtoken</groupId> < ...

  10. Python安装及配置教程

    安装教程 一.python3.6安装步骤 1.首先我们移步官网,下载最新版本的python-3.6.0.点我,我把你传送到python官网 在DownLoad下拉框中点击Windows,选择要下载的文 ...