How to call scrollTo method on a virtual scroller

UI Components for Vue
Post Reply
leolivier
Posts: 3
Joined: 15 May 2021, 19:55

09 Jan 2022, 21:15

Hi,
I wrote a component which uses the VirtualScroller and I would like to scroll to the end of the scroller each time I'm adding new elements.
My code looks like this (it's typescript with vue-class-component and single file syntax):

Code: Select all

<template>
 ...
   <VirtualScroller :items="content" :itemSize="50" class="streamscroller" ref="streamscroller">
      <template v-slot:item="{ item }">
        <pre>{{ item }}</pre>
      </template>
    </VirtualScroller>
...
</template>

<script lang="ts">
...
import { ref, ComponentPublicInstance } from "vue";
import VirtualScroller from "primevue/virtualscroller";
...
@Options({
  components: {
    VirtualScroller,
...
  },
})
export default class StreamResultViewer extends Vue {
  streamscroller = ref<ComponentPublicInstance<VirtualScroller>>();
...
  mounted(): void {
...
    console.debug("scroller mounted: ", this.streamscroller.value);   // <=== here, already the value is indefined
  }
  onData(msg: string): void {
      const lines = msg.split('\n');
      const content =  [...this.content, ...lines];
      this.content = content;
      console.debug("scroller: ", this.streamscroller.value);   // <== always undefined
      this.streamscroller.value?.scrollInView(this.content.length, 'to-end', 'smooth');   // <== so never called
  }
...
The virtual scroller works well (I can add lines each time they arrives and the scroll bar moves...) but I can never call the scroll method because the ref is undefined...

Any clue?
Thank you

leolivier
Posts: 3
Joined: 15 May 2021, 19:55

15 Jan 2022, 18:13

Would someone be interested, the only workaround I found is too use $refs like this:

Code: Select all

onData(msg: string): void {
  const lines = msg.split('\n');
  const content = [...this.content, ...lines];
  this.content = content;
  const scroller = this.$refs.streamscroller as VirtualScroller;
  scroller.scrollInView(this.content.length, 'to-end', 'smooth');
}
This way, I am able to call the scrolling method and it works fine.

If someone can explain how it should work normally with ref<T>() in the vue-class-component + typescript mode, I'd be glad to hear that.

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests