vue div 设置滚动条位置 一直在底部

效果:每发布一条信息,滚动条自动滚动到最新消息位置

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

 

上一篇:小程序回到程序顶部


下一篇:前端小白成长日记