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. Server2008通过bat命令自动定时备份MySQL数据库

    第一种方法: 环境: MySQL 安装位置:D:\MySQL 论坛数据库名称为:Db_Test 数据库备份目的地:D:\db_bak\ 1.首先新建一个bat文件 rem ************** ...

  2. plc扫描周期

  3. TCP和UDP协议之间的区别与原理

    一.TCP和UDP协议之间的区别 TCP是基于连接的,而UDP是基于非连接的. TCP传输数据稳定可靠,适用于对网络通讯质量要求较高的场景,需要准确无误的传输给对方,比如,传输文件,发送邮件,浏览网页 ...

  4. Web安全与渗透测试笔记

    Web安全与渗透测试笔记 @author: lamaper 一.基本网络知识 (一)网络是怎样联通的 TCP/IP协议 Internet Http协议 (二)Http协议 http请求 一个完整的Ht ...

  5. leetcode91解码

    解码,dp,注意特殊情况 def numDecodings( s: str) -> int: if len(s) < 1: return 1 if s[0] =='0': return 0 ...

  6. Firefox几个必备的插件

    翻译网页 使用 Google 或 Yandex 实时翻译您的页面. Dualsub 通用字幕渲染器 Gesturefy 具有大量自定义功能的鼠标手势扩展,令浏览和操作更加便捷迅速. AdBlocker ...

  7. 如何在eclipse里的动态Web项目建立后缀为xml的文件

    1.右击Dynamic Web Project类型项目的WEB-INF->new->Other->XML,选择XML File2 点击next改名字为web(后缀不要动哦)3. 点击 ...

  8. （0514）python学习-思维导图

  9. Linux_CMD_FOR_OS_INFO

    1,系统版本 :  lsb_release -a 2,系统信息(86/64): uname -a 3,键盘信息:localectl status 4,系统支持的键盘:localectl list-ke ...

  10. IaaS--云虚拟机（一）（何恺铎《深入浅出云计算》笔记整理）

    [概念讲解] 云虚拟机的体系结构,就是全面解耦的计算存储分离的设计思想. 传统的虚拟化,往往是对单一物理机器资源的纵向切割,计算.存储.网络等各方面的能力都是一台物理机的子集.因此,从可伸缩性的角度来 ...