CODEWITHSUNDEEP
javascriptvue.jsquasar-frameworkquasar
Chris Eikrem
Chris Eikrem

Reputation: 576

Reverse q-scroll-area

I would like to reverse the q-scroll-area. With that I mean that I want it to behave like a chat. I want the components to render from the bottom and up, and not from the top. I would also like the on-mount default scroll to be on the bottom and not top.

Is there a simple way to do this or do I have to do it all manually? Thanks.

Upvotes: 0

Views: 1535

Answers (1)

Anis
Anis

Reputation: 1220

The quasar framework q-scroll-area is not usually used for chat like modules, they have Infinite Scroll which is a perfect solution issue you are facing. it also support Reverse Scroll, you can use it by passing a reverse prop

<template>
  <div class="q-pa-md">
    <q-infinite-scroll @load="onLoad" reverse>
      <template slot="loading">
        <div class="row justify-center q-my-md">
          <q-spinner color="primary" name="dots" size="40px" />
        </div>
      </template>

      <div v-for="(item, index) in items" :key="index" class="caption q-py-sm">
        <q-badge class="shadow-1">
          {{ items.length - index }}
        </q-badge>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.
      </div>
    </q-infinite-scroll>
  </div>
</template>

Upvotes: 1

Related Questions