vue 聊天 滚动条保持在底部

 //每次页面渲染完之后滚动条在最底部
        updated:function(){
        this.scrollToBottom();
        },
        created:function(){
            this.connectIm()
            this.scrollToBottom()
        },
        watch:{
            nowItem(newVal, oldVal) {
                this.getNote(newVal)
            }
        },
        methods:{
            scrollToBottom: function () {
                this.$nextTick(() => {
                    if(this.$refs.chatPage_right_ref && this.$refs.chatPage_right_ref.length>0){ 
                       this.$refs.chatPage_right_ref.forEach((item)=>{ 
                       this.$refs.chatPage_right_main_ref.scrollTop = item.clientHeight + this.$refs.chatPage_right_main_ref.scrollTop;
                     })
                  }
               })
           },





                <div class="chatPage_right_main" ref="chatPage_right_main_ref">
                    <div v-for="(item, index) in nowMsg" :key="index" ref="chatPage_right_ref">
                        <div class="chatPage_right_main_right" v-if="item.is_main == 1">
                            <div>
                                <img src="/Application/Home/View/szzmzb/Public/img/openMessge.png" alt="">
                            </div>
                            <div class="chatPage_right_main_messge">
                                {{item.content}}
                            </div>
                        </div>


                        <div class="chatPage_left_main_left" v-else>
                            <div class="chatPage_left_main_messge">
                                {{item.content}}
                            </div>
                            <div>
                                <img src="/Public/images/kefu.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>










  <div class="chatMessge">
         <div class="accept_chat_Messge" ref="ref_accept_chat_Messge">
                <div ref="accept_chat_main" class="accept_chat_main" v-for="(items, key) in msgObj" :key="key" v-show="key == activeKey">
                    <div v-for="(item, k) in items" :key="k">
                        <!-- <div class="accept_header">
                            <div class="accept_header_messge">
                                欢迎您的咨询，期待为您服务!
                            </div>
                        </div> -->
                        <div class="accept_chat_left" v-if="(userInfo.is_supply > 0 && item.is_main == 1) || (userInfo.is_supply == 0 && item.is_main == 2)">
                            <div class="accept_chat_main_left">
                                <div><img src="/Application/Home/View/szzmzb/Public/img/openMessge.png" alt=""></div>
                                <div class="accept_chat_main_left_center">
                                    <div style="font-size: 12px;
                                    color: #62778C;">{{item.add_time}}</div>
                                    <div class="accept_chat_main_left_box">
                                        <div style="line-height: 1.7;">
                                            {{item.content}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="accept_chat_right" v-if="(userInfo.is_supply > 0 && item.is_main == 2) || (userInfo.is_supply == 0 && item.is_main == 1)">
                            <div class="accept_chat_main_right">
                                <div class="accept_chat_main_right_center">
                                    <div style="font-size: 12px;
                                    color: #62778C;">{{item.add_time}}</div>
                                    <div class="accept_chat_main_left_box">
                                        <div style="line-height: 1.7;">
                                            {{item.content}}
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <img src="/Application/Home/View/szzmzb/Public/img/openMessge.png" alt="">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
        </div>
    </div>





 mounted () {
          this.scrollToBottom();
        },
        //每次页面渲染完之后滚动条在最底部
        updated:function(){
        this.scrollToBottom();
        },
        created:function(){
            this.scrollToBottom();
            this.initSupply()
            this.connectIm()
        },
        methods:{
            scrollToBottom: function () {
                this.$nextTick(() => {
                    if(this.$refs.accept_chat_main.length>0){ 
                        console.log()
                    Array.from([...this.$refs.accept_chat_main]).forEach((item)=>{ 
                        console.log(item.clientHeight)
                        this.$refs.ref_accept_chat_Messge.scrollTop = item.clientHeight + this.$refs.ref_accept_chat_Messge.scrollTop;
                    })
                    }
                })
           },










 pasteSendMsg(e){ 
                var cbd = e.clipboardData;
                // 如果是 Safari 直接 return
                if (!(e.clipboardData && e.clipboardData.items) ) {
                    return ;
                }
                // Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
                if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
                    cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
                    ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
                    return;
                }
                for(var i = 0; i < cbd.items.length; i++) {
                    var item = cbd.items[i];
                    if(item.kind == "file"){
                        var blob = item.getAsFile();
                        if (blob.size === 0) {
                            return;
                        }
                        var reader = new FileReader();
                        var imgs = new Image(); 
                        imgs.file = blob;
                        reader.onload = (function(aImg) {
                        return function(e) {
                            aImg.src = e.target.result;
                        };
                        })(imgs);
                        reader.readAsDataURL(blob);
                        var userAgent = navigator.userAgent;
                        var desc = navigator.mimeTypes['application/x-shockwave-flash'];     
                        //我看好多方法是用注释这一句,但是实践起来,在谷歌浏览器里navigator.mimeTypes['application/x-shockwave-flash']打印没有值,所以后面的方法会报错
                        //navigator.mimeTypes['application/x-shockwave-flash'].description.toLowerCase();
                        if (userAgent.indexOf("Chrome") > -1) {
                            if(!desc){
                                //谷歌浏览器
                                console.log('谷歌浏览器')
                            }else{
                                //360浏览器
                            console.log('360浏览器')
                            this.$refs.send_input.appendChild(imgs);
                            }
                        }else{
                            //其他浏览器
                            this.$refs.send_input.appendChild(imgs);
                        }
                    }
                }

                    
                    var pastedText = ""
                       if(window.clipboardData && window.clipboardData.getData) {
                        // 获取拷贝进剪切板指定格式的数据 (此处用的Text格式)
                        pastedText = window.clipboardData.getData('Text')
                        console.log(pastedText,"pastedText1")
                       }
                       if((e.clipboardData || e.originalEvent.clipboardData) && (e.clipboardData || e.originalEvent.clipboardData).getData) {
                        pastedText = (e.originalEvent || e).clipboardData.getData('text/plain')
                        console.log(pastedText,"pastedText2")
                        if(pastedText){ 
                            var str = pastedText.replace(/\s+/g,"");
                            if(this.$refs.send_input.hasAttribute("contenteditable")){ 
                                this.$refs.send_input.removeAttribute("contenteditable")
                            }
                            this.$refs.send_input.innerHTML +=str
                            this.$refs.send_input.setAttribute("contenteditable",'true')
                        }
                       }