SoFunction
Updated on 2025-04-11

When vue enters the page, the scrollbar is always at the bottom code instance

This article shares the specific code that always has the scroll bar at the bottom when vue enters the page. For your reference, the specific content is as follows

mounted () {
 ();
},
//After each page rendering, the scroll bar is at the bottomupdated:function(){
 ();
},
methods:{
 scrollToBottom: function () {
  this.$nextTick(() => {
	 var container = this.$(".chatBox-content-demo");
   = ;
  })
}
}

Scroll bar style:

::-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;
}

If better-scroll is used

existcreated()ormounted () Anything inside
 
mounted () {
 this.$nextTick(() => {
 this._initScroll();
 let allLi=this.$("li");
 (allLi[-1],0);
 });
},
//After each page rendering, the scroll bar is at the bottomupdated:function(){
  this.$nextTick(() => {
this._initScroll();
let allLi=this.$("li");
(allLi[-1],0);
  });
},
methods:{
 _initScroll(){
=new BScroll(this.$,{
   click:true
  })
}}
 
structure
<div ref="$" style="overflow: hidden;">
  <ul>
 <li></li>
  </ul>
</div>

The above is what the editor introduces to you. When the vue is entered into the page, the scroll bar is always explained and integrated at the bottom. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!