vue3 直播间评论滚动效果--- 直接复制即可

<template>
  <div class="container">
    <div
      class="btn bg-[#f50] px-[10px] w-[50px] cursor-pointer"
      @click="addComent"
    >
      添加评论 {{ commentList.length }} --{{ restComment }}
    </div>
    <div class="rest-nums" v-show="restComment" @click="scrollBottom">
      {{ restComment }}条新消息
    </div>
    <div class="comment-wrap" ref="wrapper">
      <div class="list" ref="list">
        <div class="item" v-for="item in commentList" :key="item.id">
          <div class="cont">
            {{ item.content }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

// 新增评论
const addComent = () => {
  index.value++;
  if (commentList.value.length >= 50) {
    commentList.value.splice(0, 10);
  }
  // let index = Math.floor(Math.random() * 1000);
  commentList.value.push({
    id: index.value,
    content: `评论内容${index.value}`,
  });
  nextTick(() => {
    renderComment();
  });
};
// 渲染评论
const renderComment = () => {
  const listHight = list.value.offsetHeight;
  const diff = listHight - wrapperHeight.value; // 列表高度与容器高度差值
  const top = wrapper.value.scrollTop; // 列表滚动高度

  console.log("进入判断", diff, diff - top);
  // 20为滚动条距离底部的距离，也可以根据自己的情况进行调整
  if (diff - top < 20) {
    if (diff > 0) {
      // 当差值大于零的时候，停止监听
      if (isBindScrolled.value) {
        console.log("停止监听");
        isBindScrolled.value = false;
        wrapper.value.removeEventListener("scroll", addScroll);
      }
      wrapper.value.scrollTo({
        top: diff + 10,
        behavior: "smooth",
      });
      restNums.value = 0;
    }
  } else {
    console.log("监听中", diff - top);
    restNums.value++;
    // 如果小于零的话，则加上监听数据
    if (!isBindScrolled.value) {
      isBindScrolled.value = true;
      wrapper.value.addEventListener("scroll", addScroll);
    }
  }
  restComment.value = restNums.value;
};
const addScroll = () => {
  debounce(listScroll(), 200);
  isBindScrolled.value = true;
};
const listScroll = () => {
  const isBottom = isScrollBottom(wrapper.value, wrapper.value.clientHeight);
  console.log(isBottom);
  if (isBottom) {
    restNums.value = 0;
    restComment.value = 0;
  }
};
// 添加评论 如果超过150条就将前50条删除
const scrollBottom = () => {
  restNums.value = 0;
  restComment.value = restNums.value;
  wrapper.value.scrollTo({
    top: list.value.offsetHeight,
    behavior: "smooth",
  });

  // debounce(this.listScroll, 200);
};
const commentList = ref([
  // {
  //   id: 1,
  //   content: "评论内容",
  // },
 
]);

* {
  padding: 0;
  margin: 0;
}
.comment-wrap {
  width: 70%;
  height: 100px;
  border: 1px #ccc solid;
  margin: 50px 10%;
  overflow-y: scroll;
  position: relative;
  -webkit-overflow-scrolling: touch;
  .item {
    color: #fff;
    box-sizing: border-box;
    // display: inline-block;
    // margin: auto;
    margin-bottom: 10px;
    .cont {
      background-color: #f50;
      display: inline-block;
    }
    // width: 1;
  }
}

utils里面的两个方法
 

/**
 * @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;
}