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.


Log in to reply