HTML5如何实现直播间评论滚动效果

这篇文章给大家分享的是有关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"动画失效的polyfill
exportdefault{
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){
//缓存一个定时器id
lettimer=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如何实现直播间评论滚动效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！