Flexbox Force Scroll To Bottom

Question

Я пытаюсь создать пользовательский интерфейс чата, который работает с перекрестным браузером. Я столкнулся с проблемой, когда я не могу получить div chat-body, чтобы оставаться в нижней части страницы при загрузке страницы и при добавлении нового сообщения.

При регистрации scrollTop для chat-body div всегда возвращается 0, даже если вы прокручиваетесь. Поэтому использование JavaScript, похоже, не может быть и речи; который является предпочтительным в любом случае.

Итак, как я могу заставить этот div оставаться прокрученным до дна?

Demo

Answer 1

Исправление было сочетание dommmm «s ответ, и thamizhanda» ответ s. Конечным решением было добавить следующий метод и назвать это в 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

С вашей деморолика, прокручивать ДИВ на самом деле .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 = ''; 

    } 

} 

});