feat: Prevent body scroll when on mobile (like on Android platform)

Author: rstoenescu

src/components/layout/QLayoutDrawer.js

@@ -6,7 +6,7 @@ import ModelToggleMixin from '../../mixins/model-toggle'
 import PreventScroll from '../../mixins/prevent-scroll'
 
 const
-  bodyClass = 'q-drawer-scroll',
+  bodyClass = 'q-body-drawer-toggle',
   duration = 150
 
 export default {
@@ -396,6 +396,7 @@ export default {
       if (otherSide && otherSide.mobileOpened) {
         otherSide.hide()
       }
+
       if (this.belowBreakpoint) {
         this.mobileOpened = true
         this.applyBackdrop(1)

src/components/layout/layout.ios.styl

@@ -55,19 +55,19 @@ $layout-transition = all .12s ease-in
   > span
     pointer-events auto
 
-body
-  &.q-layout-animate .q-layout-transition
-    transition $layout-transition
+body.cordova.platform-ios
+  .q-layout-header > .q-toolbar:first-child,
+  .q-layout-header > .q-tabs:first-child .q-tabs-head
+  .q-layout-drawer.top-padding
+    padding-top $ios-statusbar-height
+    min-height ($toolbar-min-height + $ios-statusbar-height)
 
-  &.cordova.platform-ios
-    .q-layout-header > .q-toolbar:first-child,
-    .q-layout-header > .q-tabs:first-child .q-tabs-head
-    .q-layout-drawer.top-padding
-      padding-top $ios-statusbar-height
-      min-height ($toolbar-min-height + $ios-statusbar-height)
-
-.q-drawer-scroll
+/* body */
+.q-layout-animate .q-layout-transition
+  transition $layout-transition
+.q-body-drawer-toggle
   overflow-x hidden
+/* body - end */
 
 .layout-padding
   @media (max-width $breakpoint-sm-max)

src/components/layout/layout.mat.styl

@@ -53,19 +53,19 @@ $layout-transition = all .12s ease-in
   > span
     pointer-events auto
 
-body
-  &.q-layout-animate .q-layout-transition
-    transition $layout-transition
+body.cordova.platform-ios
+  .q-layout-header > .q-toolbar:first-child,
+  .q-layout-header > .q-tabs:first-child .q-tabs-head
+  .q-layout-drawer.top-padding
+    padding-top $ios-statusbar-height
+    min-height ($toolbar-min-height + $ios-statusbar-height)
 
-  &.cordova.platform-ios
-    .q-layout-header > .q-toolbar:first-child,
-    .q-layout-header > .q-tabs:first-child .q-tabs-head
-    .q-layout-drawer.top-padding
-      padding-top $ios-statusbar-height
-      min-height ($toolbar-min-height + $ios-statusbar-height)
-
-.q-drawer-scroll
+/* body */
+.q-layout-animate .q-layout-transition
+  transition $layout-transition
+.q-body-drawer-toggle
   overflow-x hidden
+/* body - end */
 
 .layout-padding
   @media (max-width $breakpoint-sm-max)

src/css/core/helpers.styl

@@ -39,7 +39,8 @@
     color inherit
     opacity .5
 
-body.with-mixin-fullscreen
+/* body */
+.q-body-fullscreen-mixin, .q-body-prevent-scroll
   overflow hidden !important
 
 .q-no-input-spinner

src/mixins/fullscreen.js

@@ -29,7 +29,7 @@ export default {
       this.container = this.$el.parentNode
       this.container.replaceChild(this.fullscreenFillerNode, this.$el)
       document.body.appendChild(this.$el)
-      document.body.classList.add('with-mixin-fullscreen')
+      document.body.classList.add('q-body-fullscreen-mixin')
 
       this.__historyFullscreen = {
         handler: this.exitFullscreen
@@ -46,7 +46,7 @@ export default {
         this.__historyFullscreen = null
       }
       this.container.replaceChild(this.$el, this.fullscreenFillerNode)
-      document.body.classList.remove('with-mixin-fullscreen')
+      document.body.classList.remove('q-body-fullscreen-mixin')
       this.inFullscreen = false
     }
   },

src/mixins/prevent-scroll.js

@@ -34,15 +34,17 @@ function shouldPreventScroll (e) {
 export default {
   methods: {
     __preventScroll (register) {
-      if (!this.$q.platform.is.desktop) {
-        return
-      }
-
       registered += register ? 1 : -1
       if (registered > 1) { return }
 
-      const action = `${register ? 'add' : 'remove'}EventListener`
-      window[action]('wheel', onWheel)
+      const action = register ? 'add' : 'remove'
+
+      if (this.$q.platform.is.mobile) {
+        document.body.classList[action]('q-body-prevent-scroll')
+      }
+      else if (this.$q.platform.is.desktop) {
+        window[`${action}EventListener`]('wheel', onWheel)
+      }
     }
   }
 }