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