41 lines
757 B
Vue
41 lines
757 B
Vue
<template>
|
|
<div class="scroll-component" :id="id">
|
|
<div class="inner-scroll-component">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const id = crypto.randomUUID();
|
|
|
|
function scrollToBottom()
|
|
{
|
|
setTimeout(() => {
|
|
const element = document.getElementById(id);
|
|
if(element)
|
|
{
|
|
element.scrollTo({top: element.scrollHeight, behavior: 'instant'});
|
|
}
|
|
}, 25)
|
|
}
|
|
|
|
defineExpose({
|
|
scrollToBottom
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.scroll-component {
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: scroll;
|
|
}
|
|
.inner-scroll-component {
|
|
width: 100%;
|
|
position: absolute;
|
|
min-height: 100%;
|
|
display: grid;
|
|
grid-template-rows: 1fr;
|
|
}
|
|
</style> |