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>
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">