HTML5实现直播间评论滚动效果的代码
直播间评论滚动效果，下划查看历史消息并停止滚动，如有新消息会出现新消息提醒，点击滚动到底部。
2.具体代码
-
{{item.name}}：
{{item.content}}
{{restComment}}条新消息
用的的两个工具函数
/**
* @desc 函数防抖
* @param {需要防抖的函数} func
* @param {延迟时间} wait
*/
export function debounce(func, wait = 500) {
// 缓存一个定时器id
let timer = 0;
// 这里返回的函数是每次用户实际调用的防抖函数
// 如果已经设定过定时器了就清空上一次的定时器
// 开始一个新的定时器，延迟执行用户传入的方法
return function (...args) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
func.apply(this, args)
}, wait)
}
}
/**
* @desc 是否滚到到容器底部
* @param {滚动容器} ele
* @param {容器高度} wrapHeight
*/
export function isScrollBottom(ele, wrapHeight, threshold = 30) {
const h1 = ele.scrollHeight - ele.scrollTop;
const h2 = wrapHeight + threshold;
const isBottom = h1 <= h2;
return isBottom;
}
总结
到此这篇关于HTML5实现直播间评论滚动效果的代码的文章就介绍到这了,更多相关H5直播间评论滚动内容请搜索潘少俊衡以前的文章或继续浏览下面的相关文章，希望大家以后多多支持潘少俊衡！
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
本文地址：/web/html5/73976.html
