Skip to content

Commit 92963ca

Browse files
committed
fix: #48
1 parent 642b44f commit 92963ca

File tree

6 files changed

+45
-43
lines changed

6 files changed

+45
-43
lines changed

dist/VueFinalModal.esm.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/VueFinalModal.esm.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/VueFinalModal.umd.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/VueFinalModal.umd.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

lib/VueFinalModal.vue

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,7 @@
4040
tabindex="-1"
4141
@click.self="onClickContainer"
4242
>
43-
<div
44-
ref="vfmContent"
45-
class="vfm__content"
46-
:class="[contentClass, { 'vfm--prevent-auto': preventClick }]"
47-
:style="contentStyle"
48-
>
43+
<div class="vfm__content" :class="[contentClass, { 'vfm--prevent-auto': preventClick }]" :style="contentStyle">
4944
<slot v-bind:params="params" />
5045
</div>
5146
</div>
@@ -178,7 +173,7 @@ export default {
178173
},
179174
beforeDestroy() {
180175
this.close()
181-
this.lockScroll && enableBodyScroll(this.$refs.vfmContent)
176+
this.lockScroll && enableBodyScroll(this.$refs.vfmContainer)
182177
this?.$el?.remove()
183178
184179
let index = this.api.modals.findIndex(vm => vm === this)
@@ -250,11 +245,11 @@ export default {
250245
handleLockScroll() {
251246
if (this.value) {
252247
if (this.lockScroll) {
253-
disableBodyScroll(this.$refs.vfmContent, {
248+
disableBodyScroll(this.$refs.vfmContainer, {
254249
reserveScrollBarGap: true
255250
})
256251
} else {
257-
enableBodyScroll(this.$refs.vfmContent)
252+
enableBodyScroll(this.$refs.vfmContainer)
258253
}
259254
}
260255
},
@@ -310,7 +305,7 @@ export default {
310305
afterModalLeave() {
311306
this.modalTransitionState = TransitionState.Leave
312307
this.modalStackIndex = null
313-
this.lockScroll && enableBodyScroll(this.$refs.vfmContent)
308+
this.lockScroll && enableBodyScroll(this.$refs.vfmContainer)
314309
315310
let stopEvent = false
316311
const event = this.createModalEvent({

lib/utils/bodyScrollLock.js

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,47 @@ const isIosDevice =
2222

2323
let locks = []
2424
let documentListenerAdded = false
25+
let clientY = 0
2526
let initialClientY = -1
2627
let previousBodyOverflowSetting
2728
let previousBodyPaddingRight
2829

29-
// returns true if `el` should be allowed to receive touchmove events.
30-
const allowTouchMove = el =>
31-
locks.some(lock => {
32-
if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
33-
return true
34-
}
30+
const hasScrollbar = el => {
31+
if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
3532

36-
return false
33+
const style = window.getComputedStyle(el)
34+
return ['auto', 'scroll'].includes(style.overflowY) && el.scrollHeight > el.clientHeight
35+
}
36+
37+
const shouldScroll = (el, delta) => {
38+
if (el.scrollTop === 0 && delta < 0) return false
39+
if (el.scrollTop + el.clientHeight + delta >= el.scrollHeight && delta > 0) return false
40+
return true
41+
}
42+
43+
const composedPath = el => {
44+
const path = []
45+
while (el) {
46+
path.push(el)
47+
if (el.classList.contains('vfm')) return path
48+
el = el.parentElement
49+
}
50+
return path
51+
}
52+
53+
const hasAnyScrollableEl = (el, delta) => {
54+
let hasAnyScrollableEl = false
55+
const path = composedPath(el)
56+
path.forEach(el => {
57+
if (hasScrollbar(el) && shouldScroll(el, delta)) {
58+
hasAnyScrollableEl = true
59+
}
3760
})
61+
return hasAnyScrollableEl
62+
}
63+
64+
// returns true if `el` should be allowed to receive touchmove events.
65+
const allowTouchMove = el => locks.some(() => hasAnyScrollableEl(el, -clientY))
3866

3967
const preventDefault = rawEvent => {
4068
const e = rawEvent || window.event
@@ -95,7 +123,7 @@ const isTargetElementTotallyScrolled = targetElement =>
95123
targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false
96124

97125
const handleScroll = (event, targetElement) => {
98-
const clientY = event.targetTouches[0].clientY - initialClientY
126+
clientY = event.targetTouches[0].clientY - initialClientY
99127

100128
if (allowTouchMove(event.target)) {
101129
return false
@@ -160,27 +188,6 @@ export const disableBodyScroll = (targetElement, options) => {
160188
}
161189
}
162190

163-
export const clearAllBodyScrollLocks = () => {
164-
if (isIosDevice) {
165-
// Clear all locks ontouchstart/ontouchmove handlers, and the references.
166-
locks.forEach(lock => {
167-
lock.targetElement.ontouchstart = null
168-
lock.targetElement.ontouchmove = null
169-
})
170-
171-
if (documentListenerAdded) {
172-
document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined)
173-
documentListenerAdded = false
174-
}
175-
// Reset initial clientY.
176-
initialClientY = -1
177-
} else {
178-
restoreOverflowSetting()
179-
}
180-
181-
locks = []
182-
}
183-
184191
export const enableBodyScroll = targetElement => {
185192
if (!targetElement) {
186193
// eslint-disable-next-line no-console

0 commit comments

Comments
 (0)