Automatic Scrolling as things are added to an ons-list
-
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>
-
@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.