Merge branch 'hotfix/lock-scroll' into next

Author: hunterliu1003

.github/ISSUE_TEMPLATE/-question.md

@@ -8,5 +8,30 @@ assignees: hunterliu1003
 ---
 
 <!-- **IMPORTANT!**
-Please make sure to look for an answer to your question in our documentation and the documentation before asking a question here.
+Before reporting a bug, please make sure that you have read through our documentation and you think your problem is indeed an issue related to our module. -->
+
+### Version
+
+vue-final-modal: <!-- ex: v0.19.0 -->
+vue: <!-- ex: v2.6.12 -->
+nuxt: <!-- ex: v2.12.0 -->
+
+### OS
+
+Mac or Windows
+
+### Reproduction Link
+<!--
+A minimal test case based on one of:
+- a fork of https://codesandbox.io/s/nuxtcontent-demo-l164h
+- a GitHub repository that can reproduce the bug
 -->
+
+### Steps to reproduce
+
+
+### What is Expected?
+
+
+### What is actually happening?
+

dist/VueFinalModal.esm.js

@@ -502,7 +502,7 @@ Calculate `z-index` automatically with zIndexBase. If zIndex is set, `zIndexAuto
 
 Set specific `z-index` to root of the modal element. If zIndex is set, `zIndexAuto`, `zIndexBase` will be ignored.
 
-### `focusRemain`
+### `focusRetain`
 
 - Type: `Boolean`
 - Default: `true`

dist/VueFinalModal.esm.js.map

@@ -41,12 +41,7 @@
         tabindex="-1"
         @click.self="onClickContainer"
       >
-        <div
-          ref="vfmContent"
-          class="vfm__content"
-          :class="[contentClass, { 'vfm--prevent-auto': preventClick }]"
-          :style="contentStyle"
-        >
+        <div class="vfm__content" :class="[contentClass, { 'vfm--prevent-auto': preventClick }]" :style="contentStyle">
           <slot :params="params" />
         </div>
       </div>
@@ -106,7 +101,6 @@ export default {
   setup(props, { emit }) {
     const uid = Symbol('vfm')
     const root = ref(null)
-    const vfmContent = ref(null)
     const vfmContainer = ref(null)
 
     const $vfm = inject(props.options.key)
@@ -196,7 +190,7 @@ export default {
     })
     onBeforeUnmount(() => {
       close()
-      props.lockScroll && enableBodyScroll(vfmContent)
+      props.lockScroll && enableBodyScroll(vfmContainer)
       root?.value?.remove()
 
       let index = $vfm.modals.findIndex(vm => vm.uid === uid)
@@ -208,7 +202,6 @@ export default {
         props,
         emit,
         vfmContainer,
-        vfmContent,
         getAttachElement,
         modalStackIndex,
         visibility,
@@ -279,11 +272,11 @@ export default {
     function handleLockScroll() {
       if (props.modelValue) {
         if (props.lockScroll) {
-          disableBodyScroll(vfmContent, {
+          disableBodyScroll(vfmContainer, {
             reserveScrollBarGap: true
           })
         } else {
-          enableBodyScroll(vfmContent)
+          enableBodyScroll(vfmContainer)
         }
       }
     }
@@ -348,7 +341,7 @@ export default {
     function afterModalLeave() {
       modalTransitionState.value = TransitionState.Leave
       modalStackIndex.value = null
-      props.lockScroll && enableBodyScroll(vfmContent)
+      props.lockScroll && enableBodyScroll(vfmContainer)
 
       let stopEvent = false
       const event = createModalEvent({
@@ -403,7 +396,6 @@ export default {
     }
     return {
       root,
-      vfmContent,
       vfmContainer,
       visible,
       visibility,

dist/VueFinalModal.umd.js

@@ -22,19 +22,47 @@ const isIosDevice =
 
 let locks = []
 let documentListenerAdded = false
+let clientY = 0
 let initialClientY = -1
 let previousBodyOverflowSetting
 let previousBodyPaddingRight
 
-// returns true if `el` should be allowed to receive touchmove events.
-const allowTouchMove = el =>
-  locks.some(lock => {
-    if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
-      return true
-    }
+const hasScrollbar = el => {
+  if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
 
-    return false
+  const style = window.getComputedStyle(el)
+  return ['auto', 'scroll'].includes(style.overflowY) && el.scrollHeight > el.clientHeight
+}
+
+const shouldScroll = (el, delta) => {
+  if (el.scrollTop === 0 && delta < 0) return false
+  if (el.scrollTop + el.clientHeight + delta >= el.scrollHeight && delta > 0) return false
+  return true
+}
+
+const composedPath = el => {
+  const path = []
+  while (el) {
+    path.push(el)
+    if (el.classList.contains('vfm')) return path
+    el = el.parentElement
+  }
+  return path
+}
+
+const hasAnyScrollableEl = (el, delta) => {
+  let hasAnyScrollableEl = false
+  const path = composedPath(el)
+  path.forEach(el => {
+    if (hasScrollbar(el) && shouldScroll(el, delta)) {
+      hasAnyScrollableEl = true
+    }
   })
+  return hasAnyScrollableEl
+}
+
+// returns true if `el` should be allowed to receive touchmove events.
+const allowTouchMove = el => locks.some(() => hasAnyScrollableEl(el, -clientY))
 
 const preventDefault = rawEvent => {
   const e = rawEvent || window.event
@@ -95,7 +123,7 @@ const isTargetElementTotallyScrolled = targetElement =>
   targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false
 
 const handleScroll = (event, targetElement) => {
-  const clientY = event.targetTouches[0].clientY - initialClientY
+  clientY = event.targetTouches[0].clientY - initialClientY
 
   if (allowTouchMove(event.target)) {
     return false
@@ -160,27 +188,6 @@ export const disableBodyScroll = (targetElement, options) => {
   }
 }
 
-export const clearAllBodyScrollLocks = () => {
-  if (isIosDevice) {
-    // Clear all locks ontouchstart/ontouchmove handlers, and the references.
-    locks.forEach(lock => {
-      lock.targetElement.ontouchstart = null
-      lock.targetElement.ontouchmove = null
-    })
-
-    if (documentListenerAdded) {
-      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined)
-      documentListenerAdded = false
-    }
-    // Reset initial clientY.
-    initialClientY = -1
-  } else {
-    restoreOverflowSetting()
-  }
-
-  locks = []
-}
-
 export const enableBodyScroll = targetElement => {
   if (!targetElement) {
     // eslint-disable-next-line no-console

dist/VueFinalModal.umd.js.map

@@ -19,7 +19,6 @@ interface VueFinalModalInfo {
   uid: symbol
   name: string
   emit: SetupContext<EmitsOptions>
-  vfmContent: Ref<HTMLDivElement>
   getAttachElement(): false | HTMLElement
   modalStackIndex: Ref<number | null>
   visibility: {
@@ -32,8 +31,7 @@ interface VueFinalModalInfo {
 }
 
 export type VueFinalModalComponent = ComponentPublicInstance & {
-  vfmContainer: HTMLDivElement,
-  vfmContent: HTMLDivElement
+  vfmContainer: HTMLDivElement
 }
 
 export type VueFinalModalProperty = {