vue div 設置滾動條位置 一直在底部

效果：每發布一條信息，滾動條自動滾動到最新消息位置

 

 

 代碼：

html:

  <div class="maquee" id="maquee">
            <ul>
              <li class="messageitem" v-for="item in socketForm.msgData  ">
                內容…………………………
              </li>
            </ul>
          </div>

css:  父div有設置固定高度和overflow：none，所以這里需要設置overflow-y:auto

.maquee{
  height: 100%;
  width: 110%;
  display: block;
  overflow-y:auto;
  overflow-x: hidden;
}

ts：

因為消息是動態增加的，所以

  ulheight:any=0;//保存滾動條位置
  /**
   * 記錄滾動條位置  內容增加完成后調用 */ getScroll() {
    $(".message").css('height', '32%');
    var temp = $(".maquee ul");
    var temp1 = temp[0].scrollHeight;
    this.ulheight= temp1;
　　//這里要取.maquee 里面ul的scrollheight,因為maquee已經固定高度了，只有取ul的scrollheight才能取到准確的內容高度

} 

/*設置滾動條位置*/
 updated() {
　　 this.$nextTick(() => {
　　 var container = this.$el.querySelector('.maquee'); 
　　　// @ts-ignore 
　　　container.scrollTop = this.ulheight;
　　 })
 }