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

这篇文章给大家分享的是有关HTML5如何实现直播间评论滚动效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

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

2.具体代码

*{
	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;
}

用的的两个工具函数

/**
*@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如何实现直播间评论滚动效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！