湖北网站推广方案,photoshop网站设计,品牌策划公司一般有什么职位,链接地址1、使用el-scrollbar实现定位滚动#xff08;elementui组件库#xff09; 如何滚动#xff1a;参考链接 比如说指定某条对话内容滚动到可视区域的中间 html结构#xff1a; div classchat-list idchat-listel-scrollbar refscro…1、使用el-scrollbar实现定位滚动elementui组件库 如何滚动参考链接 比如说指定某条对话内容滚动到可视区域的中间 html结构 div classchat-list idchat-listel-scrollbar refscroll styleheight: 100%;div v-ifchatListAll.length 0 !callEnd stylecolor: rgba(0, 0, 0, 0.4); text-align: center;暂无对话/divchat-itemv-for(chat, index) in chatListAll:keyindex:chatchat:searchKeysearchKeyrefchat:classchat.isActive ? active : /div v-ifcallEnd stylecolor: rgba(0, 0, 0, 0.4); text-align: center;本次通话已结束/div/el-scrollbar/divjs计算滚动的代码 scrollUncivilized(data) {this.$nextTick(() {let chatDiv document.querySelector(#chat-list);console.log(chatDiv.offsetHeight);// const parentHeight chatDiv.offsetHeight - 48; // 减去上下paddingconst parentHeight chatDiv.clientHeight; // 直接获取可视区域的高度if (this.chatListAll.length) {const index this.chatListAll.findIndex(item item.warning data);if (index -1) {const itemOffsetTop this.$refs.chat[index].$el.offsetTop; // item顶部到父元素顶部的距离const itemOffsetHeight this.$refs.chat[index].$el.offsetHeight; // 元素本身的高度// if (this.$refs.chat[index].$el.offsetTop parentHeight) {this.$refs[scroll].wrap.scrollTop itemOffsetTop - (parentHeight - itemOffsetHeight) / 2;// }// this.$refs.chat[index].$el.scrollIntoView(true);console.log(this.$refs[scroll].wrap.scrollTop);}}});},2、使用ScrollIntoView滚动到可视区域 如果对滚动的位置要求不高只是滚动到可视区域内可以使用ScrollIntoView滚动到可视区域的顶部或底部 参考链接
参考识别scrollTop、offsetTop、offsetHeight、clientHeight等 vue实现聊天框自动滚动参考链接
