Is there a way to keep the scroll position when switching between Tab Panels?

[hamidhosseini]

I have two Tab Panels which each show a list of items. I want to use this on my home page but the problem I have is when switching between the Panels, the scroll position is lost. When you scroll in a panel, switch to another panel, and switch back to the first panel, the panel scroll position jumps back to the top. I have used "keep-alive" attribute but didn't do anything.
Is this even possible to achieve with Tab Panels?

[hawkeye64]

Panels are destroyed when switched unless you use keep-alive. If you don't use this property, then you can use onBeforeUnmount method to save the current position. Save the data outside of your component but within the <script> tags. In the onMounted method, check if the value is > 0 and set scroll offset appropriately.

[nekooee]

I used keep-alive, but when I click on tabs, window jump to top of page! when I open "inspect element" and shrinking the height of screen, problem solve! also when remove the "animated" problem solve...
please help me

[zackAJ]

The scroll element is the parent of the <q-tab-panel>
this is what you want to do, implementation of @hawkeye64 's answer:

<template>
...
    <q-tab-panel @vue:before-unmount="(comp)=>rememberScroll(comp)" @vue:mounted="(comp)=>setScroll(comp)"  ... >
             ...
    </q-tab-panel>
...
</template>

<script setup>
import {  ref } from "vue";

const scrollY = ref(0);

function rememberScroll(comp){
/**
 * @type {HTMLElement}
 */
  const scrollArea = comp.el.parentElement;
  scrollY.value = scrollArea.scrollTop;
}

function setScroll(comp){
/**
 * @type {HTMLElement}
 */
  const scrollArea = comp.el.parentElement;
  scrollArea.scrollTop = scrollY.value;
}
</script>