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