先說需求：
資料實時更新渲染到頁面
頁面高度隨資料更新變化
預設頁面顯示當前更新內容即滾動條處於頁面最底部
當用戶進行滑鼠滾輪向上滾動或者拖動滾動條向上時停止滾動條處於頁面最底部操作
當用戶進行上一步操作後又向下滾動時 繼續讓滾動條保持最下
思路：
首先得監聽頁面的scroll時間並判斷是向上或者向下滾動
讓滾動條保持在頁面最底部

 data() {
        return {
            oldScrollTop:0,
            scrollFlag:true,
            Intervall:null,
        }
    },

   mounted() {
           
 
this.getUpdataData()
           //監聽滾動事件
        document.querySelector(".box").addEventListener('scroll',this.scrolling)
        
        this.scrollToBottom();
    },
      destroyed(){
          // 銷燬監聽滾動事件
         document.querySelector(".consoleBox").removeEventListener('scroll',this.scrolling)
    },
 

methods:{
    //滾動條保持最底部方法
    scrollToBottom () {
            this.$nextTick(() => {
                var container = this.$el.querySelector(".box");
                container.scrollTop = container.scrollHeight;
            })
        },
        
        scrolling() {
            let scrollTop = document.querySelector("
 
.box").scrollTop 
            // 更新——滾動前，滾動條距文件頂部的距離
            let scrollStep = scrollTop - this.oldScrollTop;
            this.oldScrollTop = scrollTop;
            //判斷當前是向上or向下滾動
            if (scrollStep < 0) {
                //向上
                console.log("正在向上滾動")
                this.scrollFlag=false
            }else{
            console.log("正在向下滾動")
                this.scrollFlag=true
            } 
        },
        getUpdataData(){
                    //定時獲取後臺返回資料
                     this.Interval=setInterval(()=>{
                           ajax("/xxx/xxx/xx").then(res=>{
                            //更新資料
                            this.xxx=res.data
                            //當資料更新完畢清除定時器
                            if(res.code===0){
                                clearInterval(this.Interval)
                            }
                            })
                            //呼叫保持滾動條方法（這一步也可以在updated生命週期呼叫）
                        if(this.scrollFlag){
                                    this.scrollToBottom();
                           }
                   },1000)
        }
}

<style scoped>
    .consoleBox {
        width: 100%;
        min-height: 500px;
        max-height: 1780px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .consoleBox::-webkit-scrollbar {
        width: 10px !important; /*高寬分別對應橫豎滾動條的尺寸*/
        height: 1px !important;
    }

    .consoleBox::-webkit-scrollbar-thumb {
        /*滾動條裡面小方塊*/
        border-radius: 10px !important;
        background-color: skyblue !important;
        /*background-color: 0096c7 !important;*/
        background-image: -webkit-linear-gradient(
                45deg,
                rgba(255, 255, 255, 0.2) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0.2) 75%,
                transparent 75%,
                transparent
        );
    }

    .consoleBox::-webkit-scrollbar-track {
        /*滾動條裡面軌道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #ededed;
        border-radius: 10px;
    }

</style>

原文地址：https://blog.csdn.net/weixin_54410967/article/details/121974459