fix: (WIP) Element in QModal doesn't scroll horizontally quasarframework#2450

Author: rstoenescu

src/utils/prevent-scroll.js

@@ -1,5 +1,5 @@
 import { getEventPath, stopAndPrevent } from './event.js'
-import { hasScrollbar, hasScrollbarX } from './scroll.js'
+import { hasScrollbar } from './scroll.js'
 import Platform from '../plugins/platform.js'
 
 let registered = 0
@@ -17,13 +17,12 @@ function shouldPreventScroll (e) {
 
   const
     path = getEventPath(e),
-    scrollY = Math.abs(e.deltaX) <= Math.abs(e.deltaY),
-    testFn = scrollY ? hasScrollbar : hasScrollbarX
+    scrollY = Math.abs(e.deltaX) <= Math.abs(e.deltaY)
 
   for (let index = 0; index < path.length; index++) {
     const el = path[index]
 
-    if (testFn(el)) {
+    if (hasScrollbar(el, scrollY)) {
       return scrollY
         ? (
           e.deltaY < 0 && el.scrollTop === 0

src/utils/scroll.js

@@ -96,28 +96,26 @@ export function getScrollbarWidth () {
   return size
 }
 
-export function hasScrollbar (el) {
+export function hasScrollbar (el, onY = true) {
   if (!el || el.nodeType !== Node.ELEMENT_NODE) {
     return false
   }
 
-  return el.scrollHeight > el.clientHeight && (
-    el.classList.contains('scroll') ||
-    el.classList.contains('overflow-auto') ||
-    ['auto', 'scroll'].includes(window.getComputedStyle(el)['overflow-y'])
-  )
-}
-
-export function hasScrollbarX (el) {
-  if (!el || el.nodeType !== Node.ELEMENT_NODE) {
-    return false
-  }
-
-  return el.scrollWidth > el.clientWidth && (
-    el.classList.contains('scroll') ||
-    el.classList.contains('overflow-auto') ||
-    ['auto', 'scroll'].includes(window.getComputedStyle(el)['overflow-x'])
-  )
+  return onY
+    ? (
+      el.scrollHeight > el.clientHeight && (
+        el.classList.contains('scroll') ||
+        el.classList.contains('overflow-auto') ||
+        ['auto', 'scroll'].includes(window.getComputedStyle(el)['overflow-y'])
+      )
+    )
+    : (
+      el.scrollWidth > el.clientWidth && (
+        el.classList.contains('scroll') ||
+        el.classList.contains('overflow-auto') ||
+        ['auto', 'scroll'].includes(window.getComputedStyle(el)['overflow-x'])
+      )
+    )
 }
 
 export default {