同事写的聊天框的自动滚动静态页面，逻辑很让我受益匪浅

//自动滚动 逻辑很让我受益匪浅
<template>
    <div id="chat" oncontextmenu="return false">
        <div class="chat-list">
            <ul class="g-contentList">
                <li v-for="(item,index) in msgList">
                    <span class="role" v-if="item.role == 1">专家</span>
                    <span class="name">{{item.name}}：</span>
                    <span class="chat-cent">{{item.content}}</span>
                </li>
            </ul>
            <div class="msg" v-show="!autoScroll && newMsg" @click="scrollToBottom()"><span><i class="iconfont icon-lingqu"></i> 你有新的消息</span></div>
            <!-- <div class="msg" v-show="!autoScroll && newMsg" @click="scrollToBottom()"><span><i class="iconfont icon-lingqu"></i> 你有新的消息</span></div> -->
        </div>
        <div class="chat-input">
            <input type="text" placeholder="说点什么吧...">
            <button>发送</button>
        </div>
    </div>
</template>
<script>
export default {
    name:'chat',
    data(){
        return{
            msgList:[],
            // 聊天记录分页数据
            start_size: 0,
            offset: 20,
            totla: 0,
            // 连接计数
            connectNum: 0,
            // 是否正在加载记录
            isLoad: false,
            // 上一页的滚动高度
            scrollHeight: 0,
            // 是否自动滚动
            autoScroll: true,
            // 是否有新消息
            newMsg: false,

        }
    },
    mounted(){
        this.getchatList(true)
        this.addScrollEvent()
    },

    methods:{
        getchatList(isFirst){
            this.isLoad = true
            let list = [
                 {
                    name:'高启明',
                    content:'我想请问一下钟老师，射频消融手术的这个环节',
                    role:1
                },
                {
                    name:'刘颖',
                    content:'请讲',
                    role:2
                },
                {
                    name:'高启明',
                    content:'我想请问一下钟老师，射频消融手术的这个环节',
                    role:1
                },
                {
                    name:'高启明',
                    content:'我想请问一下钟老师，射频消融手术的这个环节我想请问一下钟老师，射频消融手术的这个环节',
                    role:2
                },
                {
                    name:'吴珊珊',
                    content:'大家伙，我是吴珊珊教授',
                    role:1
                },
                {
                    name:'吴珊珊',
                    content:'大家伙，我是吴珊珊教授',
                    role:1
                },
                {
                    name:'吴珊珊',
                    content:'大家伙，我是吴珊珊教授',
                    role:1
                },
                {
                    name:'吴珊珊',
                    content:'大家伙，我是吴珊珊教授',
                    role:1
                },
                {
                    name:'高疼',
                    content:'我想请问一下钟老师，射频消融手术的这个环节',
                    role:2
                },
                {
                    name:'杨咪咪',
                    content:'我想请问一下钟老师，射频消融手术的这个环节，有什么要注意的事项吗？',
                    role:2
                },
                {
                    name:'杨咪咪',
                    content:'我想请问一下钟老师，射频消融手术的这个环节，有什么要注意的事项吗？',
                    role:2
                },
                {
                    name:'杨咪咪',
                    content:'我想请问一下钟老师，射频消融手术的这个环节，有什么要注意的事项吗？',
                    role:2
                },
                {
                    name:'杨咪咪',
                    content:'我想请问一下钟老师，射频消融手术的这个环节，有什么要注意的事项吗？',
                    role:2
                },
            ]
            this.each(list, (item) => {
                this.msgList.unshift(item)
            })
            if (isFirst) { // 如果是第一次加载 就把进度条拉倒最底下
                this.scrollToBottom('#chat>.chat-list>.g-contentList')
            }
            // 获取到数据后 给scrollHeight赋值  在下次滚动的时候用
            var contentEl = $('#chat>.chat-list>.g-contentList')

            setTimeout(() => {
                contentEl.scrollTop(contentEl[0].scrollHeight - this.scrollHeight)
                this.scrollHeight = $('#chat>.chat-list>.g-contentList')[0].scrollHeight
            }, 1)
        },
        // 添加滚动条事件 ，当滚动到最上面的时候 加载下一页数据
        addScrollEvent() {
            var contentEl = $('#chat>.chat-list>.g-contentList')
            console.log(contentEl)
            contentEl.scroll((e) => {
                // 判断是不是已经加载完了
                var num = 0
                // this.each(this.msgList, (item) => {
                //     if (item.type !== 'alert') {
                //         num++
                //     }
                // })

                this.autoScroll = contentEl.scrollTop() + contentEl[0].clientHeight === contentEl[0].scrollHeight
                console.log(this.autoScroll)
                if (!this.autoScroll) {
                    this.newMsg = false
                }
                // 如果正在加载 或者当前列表里面的消息数量大于等于 历史记录里面的数量  就不执行下面代码
                // if (this.isLoad || num >= this.total) {
                //     return
                // }
                // 当现在滚动的位置 距离顶部还有百分之10的时候 加载下一页
                console.log(contentEl.scrollTop())
                if (contentEl.scrollTop() === 0) {
                    this.getchatList()
                }
            })

        },
        // 使聊天的滚动条始终保持在最下面
        scrollToBottom(select) {
            // 现在所有的消息 始终会使滚动条在 底下， 后面需要判断下
            // 如果他网上滚动了滚动条  就设置一个属性 这个属性为true  就不再执行来消息 固定拉倒下面， 而是弹框提示有新消息
            // 只有再次拉倒最下面 才会解除

            if (!select) {
                select = '#chat>.chat-list>.g-contentList'
            }
            setTimeout(() => {
                $(select).scrollTop( $(select)[0].scrollHeight )
            }, 1)
        },
    }
}
</script>

<style lang="less" scoped>
#chat{
    width: 100%;
    height: 100%;
    font-size: 0.12rem;
    position: relative;
    .chat-input{
        height: .76rem;
        line-height: .76rem;
        border-top: 1px solid #F6F6FB;
        width: 100%;
        padding: 0 .2rem;
        box-sizing: border-box;    
        font-family: Source Han Sans CN;
        font-weight: 400;
        input{
            width: 2.87rem;
            height: .34rem;
            line-height: .34rem;
            border: .01rem solid #999999;
            border-radius: .03rem;
            padding: 0 .2rem;
            box-sizing: border-box;
            font-size: .14rem;
        }
        button{
            width: .6rem;
            height: .34rem;
            line-height: .34rem;
            background: #447BF8;
            border-radius: .03rem;
            cursor: pointer;
            color: #FFF;
            font-size: .14rem;
        }
    }
    .chat-list{
        height: calc(100% - .76rem);
        width: 100%;
        padding: 0.05rem 0.05rem .16rem .16rem;
        box-sizing: border-box;
        position: relative;
        .msg{
            position: absolute;
            bottom:0.10rem;
            left:0;
            width:100%;
            height:0.30rem;
            text-align: center;
            color: #4796FA;
            span{
                display: inline-block;
                width:auto;
                height:0.30rem;
                line-height:0.30rem;
                border-radius: 0.12rem;
                background: #fff;
                padding:0 0.10rem;
                box-shadow: 0 0.04rem 0.10rem 0 rgba(7,17,27,.2);
                cursor: pointer;
                i{
                    vertical-align: middle;
                    font-size: 0.20rem;
                }
            }
        }

        ul{
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            &::-webkit-scrollbar{
                // width: .1rem;
            }
            li{
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: .14rem;
                line-height: .3rem;
                margin-top: .05rem;
                .name{ 
                    color: #447BF8;
                }
                .chat-cent{

                }
                .role{
                    background: #FFCF39;
                    border-radius: .1rem;
                    color: #FFF;
                    height: .2rem;
                    line-height: .2rem;
                    padding: 0 .12rem;
                    font-size: .12rem;
                }
            }
        }
        
    }
}
</style>