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.