list set scroll top to zero



  • i have side menu list and main list in my quasar app, when i click an item from the side menu list , the list in main content is updated, the list is big and can be scrolled, ok. if i clicked item from side menu again i want to set the list scroll position to 0 , ie show the starting of the list, now after list is updated, it remains at the scroll position where i stop scrolling the previous list



  • Take a look at the scroll utils



  • @benoitranque , thank you for reply, I already seen that, but dont know how to use it in my app, i hope u will help

    in Home.vue

    <template>
        <q-layout ref=“layout” view=“lHh Lpr fff” :left-class="{‘bg-white’: true}">
            <q-toolbar slot=“header” class=“bg-secondary glossy”>
    
                <q-btn flat @click="$refs.layout.toggleLeft()">
                    <q-icon name="menu" />
                </q-btn>
    
                <q-toolbar-title>
                    {{chaptSelected.ar.Chapter.ChapterName}}
                    <!-- <div slot="subtitle">Running on Quasar1 v{{$q.version}}</div> -->
                </q-toolbar-title>
            </q-toolbar>
    
            <div slot="left">
                <sidemenu v-on:chaptClick="chaptClicked"></sidemenu>
            </div>
    
            <ayas ref="ayas" v-bind:chapter="chaptSelected"></ayas>
        </q-layout>
    </template>
    
    

    in ayas.vue

    <template>
        <q-list no-border link inset-delimiter class="bg-yellow-1">
            <!-- <q-list-header class="uth"> {{chapter.ar.Chapter.ChapterName}}</q-list-header> -->
            <q-item v-for="(aya, index) in chapter.ar.Chapter.Verse">
                <q-item-side>{{index+1}}</q-item-side>
                <q-item-main>
                    <q-item-tile class="uthmani" label>{{aya.text}}</q-item-tile>
                    <q-item-tile class="manjari" sublabel>{{chapter.ml.Chapter.Verse[index].text}}</q-item-tile>
                </q-item-main>
            </q-item>
        </q-list>
    </template>
    
    

    i want to reset the <q-list> scroll position to top each time the list is updated with new items.

    thanks



  • If you want to scroll the whole window, use window.scrollTo(0, 0). If you need anything more complex, this stackoverflow question has useful answers



  • @benoitranque Thank you :D , this worked, i was trying to do this in quasar way,



  • No need to reinvent the wheel! Sometimes quasar makes you forget you still have all that other stuff at your disposal


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.