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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
vue - vue.config.js中devServer配置方式
Oct 30 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程序61条面向对象分析设计的经验小结
2008/11/12 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
Python3基础之条件与循环控制实例解析
2014/08/13 Python
python实现将文本转换成语音的方法
2015/05/28 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
Python实现12306火车票抢票系统
2019/07/04 Python
python同步windows和linux文件
2019/08/29 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
如何手工释放资源
2013/12/15 面试题
门卫岗位安全职责
2013/12/13 职场文书
物流管理专业自荐信
2014/06/23 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技