html5+实现上下滚动效果代码,HTML5实现直播间评论滚动效果的代码

秒速五厘米 2022-10-06 05:56 260阅读 0赞

![cc31dac761c50fca9ef36904a43a5e24.gif][]

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

2.具体代码

*  \{ \{item.name\}\}：
    
    \{ \{item.content\}\}

\{ \{restComment\}\}条新消息

import smoothscroll from 'smoothscroll-polyfill';

import \{ debounce, isScrollBottom \} from '../utils/utils';

smoothscroll.polyfill(); // 移动端scrollTo behavior: "smooth"动画失效的polyfill

export default \{

data() \{

return \{

list: \[\],

restComment: 0,

restNums: 0,

wrapperDom: null,

listDom: null,

wrapperHeight: 0

\};

\},

mounted() \{

this.initDom();

// ajax...

const data = new Array(20).fill('');

this.queue(data);

setTimeout(() => \{

const list = new Array(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) \{

return new Promise((resolve, reject) => \{

setTimeout(() => \{

this.addComment(opt);

resolve()

\}, 500);

\});

\},

// 队列添加消息

async queue(data) \{

for (let i = 0; i < data.length; i++) \{

const opt = \{

name: i + "-用户名",

content: i + "-评论内容",

id: Date.now()

await this.addTimeOut(opt);

\},

addScroll() \{

debounce(this.listScroll, 200);

this.isBindScrolled = true;

\},

listScroll() \{

const ele = this.wrapperDom;

const isBottom = 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() \{

const listHight = this.listDom.offsetHeight;

const diff = listHight - this.wrapperHeight; // 列表高度与容器高度差值

const top = 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"

\});

\};

\*\{

padding: 0;

margin: 0;

.comment\{

width: 70%;

height: 350px;

position: relative;

margin: 100px 0 0 20px;

.comment-wrap\{

height: 350px;

overflow-y: scroll;

\-webkit-overflow-scrolling:touch;

.comment-wrap li\{

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: 0 15px;

bottom: 10px;

background: \#fff;

font-size: 14px;

left: 10px;

用的的两个工具函数

/\*\*

\* @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直播间评论滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

[cc31dac761c50fca9ef36904a43a5e24.gif]: /images/20221005/c3b3bee87e564f6f844a17b48a6f3976.png

html5+实现上下滚动效果代码,HTML5实现直播间评论滚动效果的代码

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 finereport决策报表添加滚动条，实现上下滚动效果

相关 HTML标签marquee实现滚动效果

相关 html实现数字滚动停留,一个简单的滚动数字的效果实现

相关 html5+实现上下滚动效果代码,HTML5实现直播间评论滚动效果的代码

相关 html横向自动滚动代码,横向不间断滚动效果代码

相关 html实现图片自动滚动效果,js实现图片左右滚动效果

相关实现文字滚动效果

相关 HTML5 Canvas动画效果实现原理

相关 HTML5 Canvas动画效果实现原理

相关 JQuery实现导航效果、新闻滚动、广告效果、横向滚动