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;
})
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步