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. unity 实现Game窗口的Stats 【转自蛮牛】

    using UnityEngine;using System.Text;using UnityEditor; public class ShowFps : MonoBehaviour{ public ...

  2. tomcat不生成日志文件

    1.不生成 catalina.out 将 /bin/catalina.sh 文件中的: if [ -z "$CATALINA_OUT" ] ; then CATALINA_OUT= ...

  3. MYSQL 5.7及以上【ONLY_FULL_GROUP_BY】报错和解决方法

    由于同事安装的Docker,就在docker上举例子吧,和非docker的操作方式都一样,只是路径上和重启方式可能不同 1,进入容器 docker exec -it xxxx(你的mysql容器名称) ...

  4. a 标签下载文件重命名文件失效

    背景 : a标签下载cos桶文件download失效 原因:下载的链接跨域,download 属性重命名文件失效,浏览器无法获取到文件,无法进行更改. 解决办法: downloadFile(url, ...

  5. JAVA学习笔记-10

    String类: 字符串是一个特殊的对象.字符串最大的特点:一旦被初始化就不可以被改变. String类适用于描述字符串事物.那么它就提供了多个方法对字符串进行操作. 常见的操作: 1.获取: int ...

  6. [笔记] Android开发中的gradle是什么？

    gradle是什么? 先看下文档中的介绍   https://docs.gradle.org/current/userguide/what_is_gradle.html Gradle is an op ...

  7. 雪花算法生成ID重复问题

    转载自: https://www.jianshu.com/p/71286e89e0c5

  8. APP学习3

    1. 常见控件 Button控件 继承自TextView控件,既可以显示文本,又可以显示图片,同时也允许用户通过点击来执行操作,点击效果. onClick属性:先在layout文件中指定onClick ...

  9. 通过Container制作Image

    1.拉取tomcat镜像 docker pull tomcat docker images 2.根据tomcat镜像创建一个tomcat container docker run -d -it --n ...

  10. springdata(jpa)的基础使用

    jpa与mybatis-plus类似,都属于数据库相关的框架 jpa需要扫描,这里在启动类指定路径 jpa的实体类需要绑定@Entity, 与mysql表映射@Table(@name="数据 ...