Merge pull request #4559 from daiagi/fix-diabled-scrolling-on-mobile

Fix disabled scrolling on mobile
kodadot · Jan 1, 2023 · 6cc4df0 · 6cc4df0
2 parents c33665a + b869bea
commit 6cc4df0
Showing 1 changed file with 9 additions and 17 deletions.
diff --git a/components/Navbar.vue b/components/Navbar.vue
@@ -229,13 +229,6 @@ export default class NavbarMenu extends mixins(
   private isMobile = window.innerWidth < 1024 ? true : isMobileDevice
 
   @Ref('mobilSearchRef') readonly mobilSearchRef
-  @Watch('isBurgerMenuOpened') onDisableScroll() {
-    if (this.isBurgerMenuOpened) {
-      return (document.body.style.overflowY = 'hidden')
-    } else {
-      return (document.body.style.overflowY = 'initial')
-    }
-  }
 
   get account() {
     return this.$store.getters.getAuthAddress
@@ -328,9 +321,7 @@ export default class NavbarMenu extends mixins(
 
   @Watch('isBurgerMenuOpened')
   onBurgerMenuOpenedChanged() {
-    document.documentElement.style.overflow = this.isBurgerMenuOpened
-      ? 'hidden'
-      : 'auto'
+    this.setBodyScroll(!this.isBurgerMenuOpened)
   }
 
   async fetchArtistIdentity(address) {
@@ -360,14 +351,13 @@ export default class NavbarMenu extends mixins(
     }
     this.lastScrollPosition = currentScrollPosition
   }
-  toggleBodyScroll() {
+  setBodyScroll(allowScroll: boolean) {
     this.$nextTick(() => {
       const body = document.querySelector('body') as HTMLBodyElement
-      const clippedClass = 'is-clipped'
-      if (body.classList.contains(clippedClass)) {
-        body.classList.remove(clippedClass)
+      if (allowScroll) {
+        body.classList.remove('is-clipped')
       } else {
-        body.classList.add(clippedClass)
+        body.classList.add('is-clipped')
       }
     })
   }
@@ -377,12 +367,12 @@ export default class NavbarMenu extends mixins(
     this.$nextTick(() => {
       this.mobilSearchRef?.focusInput()
     })
-    this.toggleBodyScroll()
+    this.setBodyScroll(false)
   }
 
   hideMobileSearchBar() {
     this.openMobileSearchBar = false
-    this.toggleBodyScroll()
+    this.setBodyScroll(true)
   }
 
   closeBurgerMenu() {
@@ -399,6 +389,8 @@ export default class NavbarMenu extends mixins(
 
   beforeDestroy() {
     window.removeEventListener('scroll', this.onScroll)
+    this.setBodyScroll(true)
+    document.documentElement.classList.remove('is-clipped-touch')
   }
 }
 </script>