vue进入页面时滚动条始终在底部代码实例
本文实例为大家分享了vue进入页面时滚动条始终在底部的具体代码，供大家参考，具体内容如下
mounted(){
this.scrollToBottom();
},
//每次页面渲染完之后滚动条在最底部
updated:function(){
this.scrollToBottom();
},
methods:{
scrollToBottom:function(){
this.$nextTick(()=>{
varcontainer=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();
letallLi=this.$refs.chatcontheight.querySelectorAll("li");
this.chartScroll.scrollToElement(allLi[allLi.length-1],0);
});
},
//每次页面渲染完之后滚动条在最底部
updated:function(){
this.$nextTick(()=>{
this._initScroll();
letallLi=this.$refs.chatcontheight.querySelectorAll("li");
this.chartScroll.scrollToElement(allLi[allLi.length-1],0);
});
},
methods:{
_initScroll(){
this.chartScroll=newBScroll(this.$refs.chatcontheight,{
click:true
})
}}
结构
以上所述是小编给大家介绍的vue进入页面时滚动条始终在底部详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！