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 相关文章推荐
javascript下过滤数组重复值的代码
Sep 10 Javascript
jQuery get和post 方法传值注意事项
Nov 03 Javascript
javascript数组去掉重复
May 12 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
JS中判断null的方法分析
Nov 21 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 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
php获取某个目录大小的代码
2008/09/10 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
php注册登录系统简化版
2020/12/28 PHP
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
Python中实现对list做减法操作介绍
2015/01/09 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
精彩的推荐信范文
2013/11/26 职场文书
教师求职自荐信
2014/03/09 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
党员创先争优承诺书
2014/03/26 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
离职感谢信
2015/01/21 职场文书
飞越疯人院观后感
2015/06/09 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技