using useScroll(div), not window

app/layouts/dashboard.vue

@@ -49,6 +49,20 @@ const nav : NavigationMenuItem[][] = [[
 onMounted(() => {
   ui_color_cookie();
 })
+// pass the x and y of the container
+const { x, y } = useScroll(useTemplateRef("layout_root_wrap"))
+
+// onMounted makes sure the page is loaded, window and document exists
+onMounted(() => {
+  const Ystate = useState("root_y", () => 0);
+// create a global state with the div's Y. 
+// I can't use window Y due to dashboard.
+// So I need to do this way
+watch(y, (newY) => {
+  Ystate.value = newY;
+})
+})
+
 
 </script>
 <template>
@@ -57,7 +71,7 @@ onMounted(() => {
     
     <UDashboardSidebarCollapse />
 
-    <UContainer class="max-w-full overflow-auto">
+    <UContainer class="max-w-full h-screen overflow-y-scroll" ref="layout_root_wrap">
       <!-- in my case I want the button to be the same everywhere.
       if you wanna customize it per page, place it per page inside UContainer -->
       <!--<UDashboardSidebarToggle variant="subtle" class="absolute z-20 top-3 left-2.5"/>-->