use IntersectionObserver to show scrolling

apps/frontend/auto-imports.d.ts

@@ -57,6 +57,7 @@ declare global {
   const useAttrs: typeof import('vue')['useAttrs']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
+  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
   const useHead: typeof import('unhead')['useHead']
   const useHeadSafe: typeof import('unhead')['useHeadSafe']
   const useId: typeof import('vue')['useId']

apps/frontend/package.json

@@ -25,6 +25,7 @@
     "@primevue/themes": "^4.2.1",
     "@tanstack/vue-query": "^5.60.6",
     "@unhead/vue": "^1.11.13",
+    "@vueuse/core": "^12.0.0",
     "events": "^3.3.0",
     "md5": "^2.3.0",
     "pinia": "^2.2.6",

apps/frontend/src/layouts/LayoutWithTabs.vue

@@ -4,25 +4,26 @@
   >
     <!-- Shadow Top -->
     <div
-      class="row-start-1 row-span-1 col-start-1 sm:row-start-2 relative w-full h-[1rem] bg-gradient-to-b from-black/30 sm:from-black/10 to-transparent dark:from-white/10 pointer-events-none transition-opacity duration-300"
-      :class="{ 'opacity-0': !showTopShadow, 'opacity-100': showTopShadow }"
+      class="transition-opacity opacity-0 row-start-1 row-span-1 col-start-1 sm:row-start-2 relative w-full h-[1rem] bg-gradient-to-b from-black/30 sm:from-black/10 to-transparent dark:from-white/10 pointer-events-none duration-300"
+      :class="{ 'opacity-100': !isTopOfContentVisible }"
     />
 
     <!-- Content Section -->
     <div
-      class="row-start-1 row-span-3 col-start-1 sm:row-start-2 overflow-hidden overflow-y-auto px-4 overscroll-contain touch-manipulation"
+      class="row-start-1 row-span-3 col-start-1 sm:row-start-2 overflow-hidden overflow-y-auto px-4 overscroll-contain touch-manipulation scrollbar scrollbar-w-1.5 scrollbar-thumb-gray-500/60 scrollbar-thumb-rounded-full"
       ref="contentScrollContainer"
-      @scroll="handleScroll"
     >
       <div class="sm:max-w-prose grid grid-cols-1 mx-auto my-5 w-full">
+        <div ref="isTopOfContentRef" />
         <slot name="default" v-bind:scrollToBottom />
+        <div ref="isBottomOfContentRef" />
       </div>
     </div>
 
     <!-- Shadow Bottom -->
     <div
-      class="row-start-3 row-span-1 col-start-1 sm:row-start-4 relative w-full h-[1rem] bg-gradient-to-t from-black/10 to-transparent dark:from-white/10 pointer-events-none transition-opacity duration-300"
-      :class="{ 'opacity-0': !showBottomShadow, 'opacity-100': showBottomShadow }"
+      class="transition-opacity opacity-0 row-start-3 row-span-1 col-start-1 sm:row-start-4 relative w-full h-[1rem] bg-gradient-to-t from-black/10 to-transparent dark:from-white/10 pointer-events-none duration-300"
+      :class="{ 'opacity-100': !isBottomOfContentVisible }"
     />
 
     <!-- Footer Section -->
@@ -52,9 +53,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { useTemplateRef } from 'vue'
-
 const slots = defineSlots<{
   default?: (slotBindings: { scrollToBottom: typeof scrollToBottom }) => void
   footer?: () => void
@@ -62,8 +60,18 @@ const slots = defineSlots<{
 
 const contentScrollContainerRef = useTemplateRef('contentScrollContainer')
 
-const showTopShadow = ref(false)
-const showBottomShadow = ref(false)
+const isTopOfContentRef = useTemplateRef('isTopOfContentRef')
+const isTopOfContentVisible = useElementVisibility(isTopOfContentRef, {
+  threshold: 1,
+  scrollTarget: contentScrollContainerRef,
+})
+const isBottomOfContentRef = useTemplateRef('isBottomOfContentRef')
+const isBottomOfContentVisible = useElementVisibility(isBottomOfContentRef, {
+  threshold: 1,
+  scrollTarget: contentScrollContainerRef,
+})
+isTopOfContentVisible.value = true
+isBottomOfContentVisible.value = true
 
 const scrollToBottom = () => {
   if (contentScrollContainerRef.value) {
@@ -71,17 +79,6 @@ const scrollToBottom = () => {
   }
 }
 
-const handleScroll = () => {
-  const el = contentScrollContainerRef.value
-  if (!el) return
-
-  const hasScrollTop = el.scrollTop > 0
-  const hasScrollBottom = el.scrollTop + el.clientHeight < el.scrollHeight
-
-  showTopShadow.value = hasScrollTop
-  showBottomShadow.value = hasScrollBottom
-}
-
 // Устанавливаем корректную высоту при загрузке и изменении размера окна
 const onresize = () => {
   document.documentElement.style.setProperty(
@@ -133,8 +130,7 @@ onMounted(() => {
   // visualViewport?.addEventListener('resize', onresize, { passive: true })
   contentScrollContainerRef.value!.addEventListener('touchmove', preventScroll, { passive: false })
 
-  // Инициализируем отображение теней
-  handleScroll()
+  console.log('mounted')
 })
 
 onBeforeUnmount(() => {

apps/frontend/tailwind.config.ts

@@ -19,5 +19,9 @@ export default {
       },
     },
   },
-  plugins: [tailwindScrollbar, tailwindcssPrimeUI, tailwindcssSafeArea],
+  plugins: [
+    tailwindScrollbar({ nocompatible: true, preferredStrategy: 'pseudoelements' }),
+    tailwindcssPrimeUI,
+    tailwindcssSafeArea,
+  ],
 }

apps/frontend/vite.config.ts

@@ -121,6 +121,10 @@ export default defineConfig(({ mode }) => {
             from: '@tanstack/vue-query',
             imports: ['useQuery', 'useMutation'],
           },
+          {
+            from: '@vueuse/core',
+            imports: ['useElementVisibility'],
+          },
           // {
           //   from: '@hereconnect/types',
           //   type: true,