Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
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.