フレックスボックス強制スクロールボトム

Question

クロスブラウザで動作するチャットUIを構築しようとしています。私はchat-body divをページのロードの最下部までスクロールさせず、新しいメッセージが追加されたときに問題に遭遇しています。

chat-body divにscrollTopを記録すると、スクロールしても常に0が返されます。したがって、JavaScriptを使用することは疑問にはなりません。とにかくこれが好ましい。

どうすればこのdivを下にスクロールさせることができますか？あなたのデモから

Demo

Answer 1

に修正プログラムがdommmmの答え、およびthamizhandaの答えの組み合わせでした。最終的な解決策は、以下のメソッドを追加し、addMessage()と同様に、mounted()に呼び出します。

scrollToBottom(force) { 
    this.$nextTick(function() { 
    let chat = document.getElementById('chat'); 
    let shouldScroll = chat.scrollHeight - chat.clientHeight <= chat.scrollTop + 1; 

    if (force || shouldScroll) { 
     chat.scrollTop = chat.scrollHeight - chat.clientHeight; 
    } 
    }); 
} 

Demo

Answer 2

、スクロール可能なdivが実際に.chat-contentの代わり.chat-bodyです。

正しいdivのスクロール位置を確認する必要があります。後世のために、あなたはmounted()時に実行されるメソッドを追加することができます。

ここ

new Vue({ 
    el: '#app', 

    data: {...}, 

    mounted() { 
    this.stubMessages(); 
    this.setScrollPos(); 
    this.watchScroll(); 
    }, 

    methods: { 
    setScrollPos(){ 
     var cBody = document.querySelector('.chat-content'); 
     cBody.scrollTop = 99999999; // arbitrary/calculated value to get to the end of the div 
    }, 

    watchScroll() { 
     var cBody = document.querySelector('.chat-content'); 
     // watch scroll position of content area 
     cBody.addEventListener('scroll', function(){ 
     console.log('scroll', cBody.scrollTop); 
     }); 
    }, 

    stubMessages() {...}, 

    addMessage() {...} 
    } 
}); 

Answer 3

私は新しいメッセージが追加されたときダウンにスクロールを設定するために使用scrollDownと呼ばれる一つの方法を追加しました。そして私は、その関数を呼び出したaddMessage()

methods: { 

scrollDown() { 
    var chtbody = document.querySelectorAll('.chat-content')[0]; 
    chtbody.scrollTop = chtbody.scrollHeight; 
    }, 
    stubMessages() {... 
    }, 

    addMessage() { 
    this.messages.push({ 
     text: this.message, 
     time: moment() 
    }); 
    this.scrollDown(); 
    this.message = ''; 

    } 

} 

});