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"动画失效的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"
            });
        }
    }
};
</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 = 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直播间评论滚动内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！