From 0d40aaf2da4154b60e729248698705244e1d35c1 Mon Sep 17 00:00:00 2001
From: Vasilii Mikhailovskii <ti.webdev@ya.ru>
Date: Sat, 7 Dec 2024 23:18:32 +0200
Subject: [PATCH] fix scroll on ios

---
 apps/frontend/src/layouts/LayoutWithTabs.vue | 21 ++++++++++++++++----
 apps/frontend/src/style.css                  |  5 +----
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/apps/frontend/src/layouts/LayoutWithTabs.vue b/apps/frontend/src/layouts/LayoutWithTabs.vue
index bf0cc9a..e6da0b3 100644
--- a/apps/frontend/src/layouts/LayoutWithTabs.vue
+++ b/apps/frontend/src/layouts/LayoutWithTabs.vue
@@ -3,7 +3,7 @@
     class="grid h-full sm:grid-rows-[auto_1fr_auto] grid-rows-[1fr_auto_auto] overflow-hidden touch-none"
   >
     <div
-      class="flex overflow-hidden overflow-y-scroll scroll-touch pb-safe-or-4 sm:pt-safe px-4 overscroll-contain"
+      class="flex overflow-hidden overflow-y-auto pb-safe-or-4 sm:pt-safe px-4 overscroll-contain touch-manipulation"
       ref="contentScrollContainer"
     >
       <div class="sm:max-w-prose grid grid-cols-1 mx-auto my-5 w-full">
@@ -67,19 +67,32 @@ const onresize = () => {
     }
   }
 }
-const onresizeOptions: AddEventListenerOptions = { passive: true }
-visualViewport?.addEventListener('resize', onresize, onresizeOptions)
+
+function preventScroll(e: TouchEvent) {
+  if (
+    contentScrollContainerRef.value &&
+    contentScrollContainerRef.value.scrollHeight <= contentScrollContainerRef.value.clientHeight
+  ) {
+    e.preventDefault()
+  }
+}
 
 const layoutPageHead = useHead({
   htmlAttrs: { class: 'overflow-hidden overscroll-none touch-none fix-layout-scrolling' },
   bodyAttrs: { class: 'overflow-hidden overscroll-none touch-none' },
 })
 
+onMounted(() => {
+  visualViewport?.addEventListener('resize', onresize, { passive: true })
+  contentScrollContainerRef.value!.addEventListener('touchmove', preventScroll, { passive: false })
+})
+
 onBeforeUnmount(() => {
   layoutPageHead?.dispose()
-  visualViewport?.removeEventListener('resize', onresize, onresizeOptions)
+  visualViewport?.removeEventListener('resize', onresize)
   document.documentElement.style.removeProperty('--visual-viewport-offset-top')
   document.documentElement.style.removeProperty('--visual-viewport-height')
+  contentScrollContainerRef.value!.removeEventListener('touchmove', preventScroll)
 })
 </script>
 
diff --git a/apps/frontend/src/style.css b/apps/frontend/src/style.css
index 4dfa925..9990740 100644
--- a/apps/frontend/src/style.css
+++ b/apps/frontend/src/style.css
@@ -7,9 +7,6 @@
 @layer tailwind-utilities {
   @tailwind components;
   @tailwind utilities;
-  .scroll-touch {
-    -webkit-overflow-scrolling: touch;
-  }
 }
 
 /*html, body, #app {*/
@@ -24,4 +21,4 @@ html {
 
 body, #app {
   height: 100%;
-}
+}
\ No newline at end of file