Automatic Scrolling as things are added to an ons-list

ckipp01

On the splash page of our app we have a dialogue like interface where the user is answering a few questions. As the questions get answers, they end up extending past the screen below. What is the best way as we add items to an ons-list that it automatically scrolls up to follow the conversation. We are using vue, and out template currently looks like below:

<template>
        <ons-list modifier="material">
           <ons-list-item modifier="nodivider leftBubble" v-for="message in messages">
            <p>{{ message.text }}</p>
         </ons-list-item>
        </ons-list>
    <ons-bottom-toolbar>     
            <input id="mainInput" v-model="newMessage" v-on:change="processMessage"  placeholder="Type your answer here...">    
    </ons-bottom-toolbar>
</template>

munsterlander

@ckipp01 You should be able to do:

window.scrollTo(0,document.body.scrollHeight);

Or a variant thereof after you add something. This will scroll to the bottom. You can control how much you want to go as well.

Automatic Scrolling as things are added to an ons-list browsing