How do I get PrimeVue ScrollPane to Scroll to the bottom as items are added

Question

Using this SFC in Vue 3 I have been unable to get the scroll panel to stay scrolled to the bottom as the array of events expands. I'm wondering if i may just have to replace this with my own custom component because it seems like you can easily to this with a div? But i would like to stick to PrimeVue components if possible?

<template>
  <Card style="width: 20em; height: 570px" class="card p-tabview-panels">
    <template #subtitle> Event Log </template>
    <template #content>
      <ScrollPanel ref="scrollPanel" style="width: 100%; height: 500px">
        <div v-for="(e, i) in events" :key="i" class="event" :class="e.type">
          {{ e.message }}
        </div>
      </ScrollPanel>
    </template>
  </Card>
</template>

<script setup>
import ScrollPanel from "primevue/scrollpanel";
import Card from "primevue/card";
import { defineProps, onUpdated, ref } from "vue";

defineProps({ events: Array });

const scrollPanel = ref(null);

onUpdated(() => {
  console.log(scrollPanel.value);
  // these seem to be undefined
  scrollPanel.value.scrollTop = scrollPanel.value.scrollHeight;
});
</script>

Answer 1

Skipping the documentation and looking at the code of ScrollPanel directly.

We can see that ScrollPanel takes a few different props, which are all set to null by default. If I understand the code correctly the prop that you want is scrollYRatio, as it controls how far you have moved into the page. Try something along the lines of:

<ScrollPanel ref="scrollPanel" scrollYRatio={0.99} style="width: 100%; height: 500px">