这篇文章主要介绍在html5中如何设置直播间评论滚动，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

直播间评论滚动效果，下划查看历史消息并停止滚动，如有新消息会出现新消息提醒，点击滚动到底部。

2.具体代码

<template><divclass="comment"><divclass="comment-wrap"ref="wrapper"><ulclass="list"ref="list"><liv-for="iteminlist":key="item.id"><spanclass="name">{{item.name}}：</span><spanclass="content">{{item.content}}</span></li></ul></div><divclass="rest-nums"v-show="restComment"@click="scrollBottom">{{restComment}}条新消息</div></div></template>

<script>importsmoothscrollfrom'smoothscroll-polyfill';import{debounce,isScrollBottom}from'../utils/utils';smoothscroll.polyfill();//移动端scrollTobehavior:"smooth"动画失效的polyfillexportdefault{data(){return{list:[],restComment:0,restNums:0,wrapperDom:null,listDom:null,wrapperHeight:0};},mounted(){this.initDom();//ajax...constdata=newArray(20).fill('');this.queue(data);setTimeout(()=>{constlist=newArray(10).fill('');this.queue(list);},30000);},methods:{initDom(){this.wrapperDom=this.$refs.wrapper;this.listDom=this.$refs.list;this.wrapperHeight=this.wrapperDom.offsetHeight;},addTimeOut(opt){returnnewPromise((resolve,reject)=>{setTimeout(()=>{this.addComment(opt);resolve()},500);});},//队列添加消息asyncqueue(data){for(leti=0;i<data.length;i++){constopt={name:i+"-用户名",content:i+"-评论内容",id:Date.now()}awaitthis.addTimeOut(opt);}},addScroll(){debounce(this.listScroll,200);this.isBindScrolled=true;},listScroll(){constele=this.wrapperDom;constisBottom=isScrollBottom(ele,ele.clientHeight);if(isBottom){this.restNums=0;this.restComment=0;}},//添加评论如果超过150条就将前50条删除addComment(data){if(this.list.length>=150){this.list.splice(0,50);}this.list.push(data);this.$nextTick(()=>{this.renderComment();});},//渲染评论renderComment(){constlistHight=this.listDom.offsetHeight;constdiff=listHight-this.wrapperHeight;//列表高度与容器高度差值consttop=this.wrapperDom.scrollTop;//列表滚动高度if(diff-top<50){if(diff>0){if(this.isBindScrolled){this.isBindScrolled=false;this.wrapperDom.removeEventListener("scroll",this.addScroll);}this.wrapperDom.scrollTo({top:diff+10,left:0,behavior:"smooth"});this.restNums=0;}}else{++this.restNums;if(!this.isBindScrolled){this.isBindScrolled=true;this.wrapperDom.addEventListener("scroll",this.addScroll);}}this.restComment=this.restNums>=99?"99+":this.restNums;},//滚动到底部scrollBottom(){this.restNums=0;//清除剩余消息this.restComment=this.restNums;this.wrapperDom.scrollTo({top:this.listDom.offsetHeight,left:0,behavior:"smooth"});}}};</script>

<stylescoped>*{padding:0;margin:0;}.comment{width:70%;height:350px;position:relative;margin:100px0020px;}.comment-wrap{height:350px;overflow-y:scroll;-webkit-overflow-scrolling:touch;}.comment-wrapli{text-align:left;line-height:30px;padding-left:10px;background:rgba(0,0,0,0.3);margin-top:5px;border-radius:15px;color:#fff;}.rest-nums{position:absolute;height:24px;line-height:24px;color:#f00;border-radius:15px;padding:015px;bottom:10px;background:#fff;font-size:14px;left:10px;}</style>

用的的两个工具函数：

/***@desc函数防抖*@param{需要防抖的函数}func*@param{延迟时间}wait*/exportfunctiondebounce(func,wait=500){//缓存一个定时器idlettimer=0;//这里返回的函数是每次用户实际调用的防抖函数//如果已经设定过定时器了就清空上一次的定时器//开始一个新的定时器，延迟执行用户传入的方法returnfunction(...args){if(timer)clearTimeout(timer)timer=setTimeout(()=>{func.apply(this,args)},wait)}}/***@desc是否滚到到容器底部*@param{滚动容器}ele*@param{容器高度}wrapHeight*/exportfunctionisScrollBottom(ele,wrapHeight,threshold=30){consth2=ele.scrollHeight-ele.scrollTop;consth3=wrapHeight+threshold;constisBottom=h2<=h3;returnisBottom;}

以上是“在html5中如何设置直播间评论滚动”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！