技術標籤：web

將滾動條預設滑動到最下方

在最外層的div中加入以下屬性

id="chatContainer"

在js中執行以下程式碼

var div = this.$el.querySelector("#chatContainer");
div.scrollTop = div.scrollHeight;

這裡以我vue專案為例:
首先封裝成方法

 messageList() {
      var div = this.$el.querySelector("#chatContainer");
      div.scrollTop =
 
 div.scrollHeight;
    }
  }

然後在vue鉤子( mounted())中呼叫

this.messageList();

更改滾動條預設樣式

.demo::-webkit-scrollbar {
  width : 6px;  /*高寬分別對應橫豎滾動條的尺寸*/
  height: 1px;
}
/*滾動條裡面小方塊*/
.demo::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #bab7b7;
}
 

/*滾動條裡面軌道*/
.demo::-webkit-scrollbar-track {
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background   : #EDEAE8;
}

在需要實現的div中加入即可

class="demo"

效果如下：