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. 配置tomcat 服务 启动模式

    1配置Tomcat的环境变量,其步骤如下: 计算机右击属性,打开环境变量---系统变量---新建变量名:CATALINA_HOME,变量值为:D:\Program Files\Apache Softw ...

  2. 九、Lambda、正则表达式

    Lambda表达式 只能简化函数式接口的匿名内部类!!!函数式接口:有且仅有一个抽象方法的接口.有@FunctionalInterface的注解的接口就必定是函数式接口. 正则表达式 单字符类 预定义 ...

  3. Oracle常用的日期操作函数 to_char()和to_date

    https://www.cnblogs.com/zhangliang88/p/12924407.html

  4. TCAM and CAM memory usage inside networking devices（转）

    TCAM and CAM memory usage inside networking devices Valter Popeskic Equipment and tools, Physical la ...

  5. D - Pair of Topics

    D - Pair of Topics 思路: 这个题需要一点思路,ai+aj>bi+bj可以转换成ai-bi+aj-bj>0,也就是c[i]=a[i]-b[i],只需要找c[i]+c[j] ...

  6. springmvc的Interceptor拦截器和servlet的filter过滤器

    springmvc的Interceptor拦截器和servlet的filter过滤器 1.springmvc的Interceptor拦截器和servlet的filter过滤器springboot实现方 ...

  7. vue 中 表单数据为数组，v-for 循环表单数据

    element-ui 中,表单数据一般为对象,但是也有是数组的情况,比如上面图示:账号和密码可以是多个,点击添加会增加一条,点击删除会删除一条 表单数据为 form:{ accounts:[ { ac ...

  8. python快速制作可视化报表

  9. Spring Web MVC注解

        @RequestMapping @RequestMapping注解的主要用途是将Web请求与请求处理类中的方法进行映射. Spring MVC和Spring WebFlux都通过RquestM ...

  10. Modern C++ ——constexpr的各种用法

    Modern C++ --constexpr的用法 Reference <现代C++语言核心特性解析> 为什么引入constexpr const可以定义常量,但也可以用来定义只读变量.co ...