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:

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

  • @ckipp01 You should be able to do:


    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.

Log in to reply