QInfiniteScroll setScrollPosition?

[lyle45]

Hey, sorry for possibly idiot question,

Is there a way to set scroll position of infinite scroll component?
moreover how'd you set scroll position to bottom if new chat message arrives and scroll is currently at bottom?

        const el = chatScroll.value && chatScroll.value.$el;
        if (el) {
          const isScrolledToBottom = el.scrollHeight - el.clientHeight <= el.scrollTop + 1;
          if (isScrolledToBottom) {
            await nextTick();
            el.scrollTop = el.scrollHeight - el.clientHeight;
          }
        }

doesn't seem to work

[ontwikkelfabriek]

Here's the source code from a chat app that scrolls down when a new message is send:
https://www.dconnell.co.uk/#/resource/smackchat-youtube-source-code

The relevant code is in the smackchat-15/src/pages/PageChat.vue file.

[lyle45]

@ontwikkelfabriek Not sure how cool it is to address me to a squeeze page/advertisement on the public support forum...

Any way, it was also unhelpful and doesn't answer my question as there's no use of QInfiniteScroll component in his code, so it's unrelated...

[lyle45]

Solved this using quasars QScrollArea

<q-scroll-area ref="chatScroll" class="full-height col q-px-md">
      <q-infinite-scroll
        v-if="chatScroll && messages.length && currentContactCard"
        reverse
        :offset="50"
        @load="load"
      >
      </q-infinite-scroll>
</q-scroll-area>

And

 const chatScroll = ref<QScrollArea | null>(null);

    watch(
      messages,
      async (newMessages) => {
        if (chatScroll.value) {
          const isClientMessage = ...;
          const scrollContainer = chatScroll.value.getScrollTarget() as HTMLDivElement;
          const isScrolledToBottom =
            scrollContainer.scrollHeight - scrollContainer.clientHeight <= scrollContainer.scrollTop + 1;
          if (isScrolledToBottom || isClientMessage) {
            await nextTick();
            chatScroll.value.setScrollPosition(
              scrollContainer.scrollHeight - scrollContainer.clientHeight
            );
          }
        }
      },
      { immediate: true }
    );