vue进入页面时滚动条始终在底部代码实例


Posted in Javascript onMarch 26, 2019

本文实例为大家分享了vue进入页面时滚动条始终在底部的具体代码,供大家参考,具体内容如下

mounted () {
 this.scrollToBottom();
},
//每次页面渲染完之后滚动条在最底部
updated:function(){
 this.scrollToBottom();
},
methods:{
 scrollToBottom: function () {
  this.$nextTick(() => {
	 var container = this.$el.querySelector(".chatBox-content-demo");
  container.scrollTop = container.scrollHeight;
  })
}
}

滚动条样式:

::-webkit-scrollbar {
 width: 5px;
 height: 5px;
}
 
::-webkit-scrollbar-track-piece {
 background-color: rgba(0, 0, 0, 0.2);
 -webkit-border-radius: 6px;
}
 
::-webkit-scrollbar-thumb:vertical {
 height: 5px;
 background-color: rgba(125, 125, 125, 0.7);
 -webkit-border-radius: 6px;
}
 
::-webkit-scrollbar-thumb:horizontal {
 width: 5px;
 background-color: rgba(125, 125, 125, 0.7);
 -webkit-border-radius: 6px;
}

 如果使用了better-scroll

在created()或者mounted () 里都可以
 
mounted () {
 this.$nextTick(() => {
 this._initScroll();
 let allLi=this.$refs.chatcontheight.querySelectorAll("li");
 this.chartScroll.scrollToElement(allLi[allLi.length-1],0);
 });
},
//每次页面渲染完之后滚动条在最底部
updated:function(){
  this.$nextTick(() => {
this._initScroll();
let allLi=this.$refs.chatcontheight.querySelectorAll("li");
this.chartScroll.scrollToElement(allLi[allLi.length-1],0);
  });
},
methods:{
 _initScroll(){
this.chartScroll=new BScroll(this.$refs.chatcontheight,{
   click:true
  })
}}
 
结构
<div ref="$refs.chatcontheight" style="overflow: hidden;">
  <ul>
 <li></li>
  </ul>
</div>

以上所述是小编给大家介绍的vue进入页面时滚动条始终在底部详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQUERY操作JSON实例代码
Feb 09 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
详解原生JS动态添加和删除类
Mar 26 #Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 #Javascript
监听element-ui table滚动事件的方法
Mar 26 #Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 #Javascript
node之本地服务器图片上传的方法示例
Mar 26 #Javascript
详解vue-element Tree树形控件填坑路
Mar 26 #Javascript
vue-router 起步步骤详解
Mar 26 #Javascript
You might like
MYSQL数据库初学者使用指南
2006/11/16 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
javascript date格式化示例
2013/09/25 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
vue项目引入ts步骤(小结)
2019/10/31 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
Python中AND、OR的一个使用小技巧
2015/02/18 Python
pygame播放音乐的方法
2015/05/19 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
生日宴会策划方案
2014/06/03 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL