HTML5实现直播间评论滚动效果的代码

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

2.具体代码

<template>    <div class="comment">    <div class="comment-wrap" ref="wrapper">    <ul class="list" ref="list">            <li v-for="item in list" :key="item.id">        <span class="name">{{item.name}}：</span>        <span class="content">{{item.content}}</span>            </li>            </ul>    </div>    <div class="rest-nums" v-show="restcomment" @click="scrollbottom">{{restcomment}}条新消息</div>    </div></template>

<script>import smoothscroll from 'smoothscroll-polyfill';import { debounce, isscrollbottom } from '../utils/utils';smoothscroll.polyfill(); // 移动端scrollto behavior: "smooth"动画失效的polyfillexport default {  data() {    return {        list: [],        restcomment: 0,        restnums: 0,        wrapperdom: null,        listdom: null,        wrapperheight: 0    };  },  mounted() {     this.initdom();     // ajax...     co学习雅思哪里好nst data = new array(20).fill('');     this.queue(data);     ttimeout(() => {         const list = new array(10).fill(''); this.queue(list);      }, 30000);  },  methods: {      initd爱的奉献歌曲om() {          this.wrapperdom = this.$refs.wrapper;          this.listdom = this.$refs.list;          this.wrapperheight = this.wrapperdom.offtheight;      },      addtimeout(op柯尔特公司t) {       return new promi((resolve, reject) => {    ttimeout(() => {    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 el一路花香教学设计e = 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.offtheight;            const diff = listhight - this.wrapperheight; // 列表高度与容器高度差值    const top = this.wrapperdom.scrolltop; // 列表滚动高度            if (diff重庆电讯职业学院 - top < 50) {                 if (diff > 0) {                    if (this.isbindscrolled) {                        this.isbindscrolled = fal;                        this.wrapperdom.removeeventlistener("scroll", this.addscroll);                    }                    this.wrapperdom.scrollto({                        top: diff + 10,                        left: 0,                        behavior: "smooth"            });                    this.restnums = 0;                }            } el {                ++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.offtheight,                left: 0,                behavior: "smooth"            });        }    }};</script>

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

用的的两个工具函数

/** * @desc 函数防抖 * @param {需要防抖的函数} func * @param {延迟时间} wait */export function debounce(func, wait = 500) {    // 缓存一个定时器id    let timer = 0;    // 这里返回的函数是每次用户实际调用的防抖函数    // 如果已经设定过定时器了就清空上一次的定时器    // 开始一个新的定时器，延迟执行用户传入的方法    return function (...args) {    if (timer) cleartimeout(timer)    timer = ttimeout(() => {    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直播间评论滚动内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！