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 相关文章推荐
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
jQuery仿写百度百科的目录树
Jan 03 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
vue实现图片按比例缩放问题操作
Aug 11 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 Socket 编程
2010/04/09 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
smarty模板数学运算示例
2016/12/11 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
node.js中的console用法总结
2014/12/15 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
js代码实现轮播图
2020/05/04 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Python3开发环境搭建详细教程
2020/06/18 Python
缅怀先烈演讲稿
2014/09/03 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书