2017-02-07 5 views
0

Ich versuche eine Chat-Benutzeroberfläche zu erstellen, die über den Browser funktioniert. Ich stoße auf ein Problem, bei dem ich das chat-body div beim Laden der Seite nicht nach unten scrollen lassen kann, und wenn eine neue Nachricht hinzugefügt wird.Flexbox Force Nach unten scrollen

Wenn die scrollTop für die div chat-body anmelden, wird es immer wiederkehr 0 auch wenn Sie gescrollt sind. JavaScript scheint also nicht in Frage zu kommen. was sowieso bevorzugt ist.

Also wie kann ich dieses div nach unten scrollen lassen?

Demo

Antwort

0

Das Update war eine Kombination aus dommmm 's Antwort, und thamizhanda' s Antwort. Die letzte Lösung bestand darin, die folgende Methode hinzuzufügen und diese in addMessage(), sowie in mounted() zu nennen.

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

1

Von Ihrer Demo, die scrollbaren div ist eigentlich .chat-content statt .chat-body.

Sie müssen die Scroll-Position für die richtige Div beobachten. Für die Nachwelt können Sie eine Methode, die dann beim mounted() läuft:

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() {...} 
    } 
}); 
0

Here i eine Methode namens hinzugefügt haben scrollDown, die die Schriftrolle nach unten zu setzen verwendet, wenn neue Nachricht hinzugefügt. Und ich rief diese Funktion in 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 = ''; 

    } 

} 

});