H5 realize the scrolling effect of live broadcast comments

1. Achieve results

2. Specific code

<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"</div> </div> </template>Copy the code

<script>
import smoothscroll from 'smoothscroll-polyfill';
import { debounce, isScrollBottom } from '.. /utils/utils'; smoothscroll.polyfill(); // scrollTo behavior:"smooth"Animation fails to polyfillexport 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); }); }, // Add messages to queue async queue(data) {for (let i = 0; i < data.length; i++) {
    		const opt = {
    			name: i + "- Username",
    			content: i + "- Comment content", 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; }, // addComment(data) {if (this.list.length >= 150) {
                this.list.splice(0, 50);
            }
	    this.list.push(data);
	    this.$nextTick(() => { this.renderComment(); }); }, // Render commentsrenderComment() { const listHight = this.listDom.offsetHeight; const diff = listHight - this.wrapperHeight; / / list height and container height difference const top = this. WrapperDom. ScrollTop; // List scrolling heightif (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; }, // Scroll to the bottomscrollBottom() { this.restNums = 0; This.restcomment = this.restnums; this.wrapperDom.scrollTo({ top: this.listDom.offsetHeight, left: 0, behavior:"smooth"}); }}}; </script>Copy the code

<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>
Copy the code

The two utility functions used

Func * @param {delay time}wait* /export function debounce(func, wait// Cache a timer IDlettimer = 0; // Empty the last timer if it has already been set // Start a new timer, delay the execution of the method passed in by the userreturn function(... args) {if (timer) clearTimeout(timer)
    	timer = setTimeout(() => {
    		func.apply(this, args)
    	}, wait} /** * @desc whether to roll to the bottom of the container * @param {roll container} ele * @param {container height} wrapHeight */export function isScrollBottom(ele, wrapHeight, threshold = 30) {
    const h1 = ele.scrollHeight - ele.scrollTop;
    const h2 = wrapHeight + threshold;
    const isBottom = h1 <= h2;
    return isBottom;
}

Copy the code