before liquid glass

src/components/pnShadowScroll.vue

@@ -1,8 +1,9 @@
 <template>
-  <div :class="{'fix-scroll-area-content': hideShadows }">
+  <div :class="{'fix-scroll-area-content': hideShadows }" class="fix-scroll-area-content-width  column col col-grow">
     <q-scroll-area
+      ref="scrollAreaRef"
       :style="{ height: height + 'px' }"
-      class="w100 q-pa-none q-ma-none"
+      class="w100 q-pa-none q-ma-none column col col-grow"
       @scroll="onScroll"
       :class=" {
         'shadow-top': hasScrolled,
@@ -10,19 +11,21 @@
       }"
       >
       <slot/>
-      <div class="q-pa-sm"/>
     </q-scroll-area>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue'
+  import { ref, onActivated, watch } from 'vue'
 
-  defineProps<{
+  const props = defineProps<{
     height: number
     hideShadows: boolean
+    scrollPosition?: number
   }>()
 
+  const emit = defineEmits(['updateScrollPosition'])
+
   const hasScrolled = ref(false)
   const hasScrolledBottom = ref(false)
 
@@ -33,12 +36,23 @@
     verticalContainerSize: number;
   }
 
-  function onScroll(info: ScrollInfo) {
+  function onScroll (info: ScrollInfo) {
     hasScrolled.value = info.verticalPosition > 0
     const scrollEnd = info.verticalPosition + info.verticalContainerSize >= info.verticalSize - 1
     hasScrolledBottom.value = !scrollEnd
+    emit('updateScrollPosition', scrollAreaRef.value?.getScrollPosition().top || 0)
   }
 
+  const scrollAreaRef = ref()
+
+  onActivated(() => {
+    scrollAreaRef.value?.setScrollPosition('vertical', props?.scrollPosition || 0)
+  })
+
+  watch(() => props.scrollPosition, (newPosition) => {
+    scrollAreaRef.value?.setScrollPosition('vertical', newPosition)
+  }, { immediate: true })
+
 </script>
 
 <style scoped>
@@ -87,6 +101,10 @@
     z-index: 1;
   }
 
+  .fix-scroll-area-content-width:deep(.q-scrollarea__content) {
+    width: 100%;
+   }
+  
   .fix-scroll-area-content:deep(.q-scrollarea::before) {
     content: none;
    }