From 093d785fbf8c982421f0098ad4b48c9d96b85ee8 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 17 Oct 2019 16:03:41 -0400
Subject: [PATCH] handle multiple body scroll lockers
---
src/directives/body_scroll_lock.js | 55 ++++++++++++++++++------------
1 file changed, 33 insertions(+), 22 deletions(-)
diff --git a/src/directives/body_scroll_lock.js b/src/directives/body_scroll_lock.js
index 6ab20c3f..a375e852 100644
--- a/src/directives/body_scroll_lock.js
+++ b/src/directives/body_scroll_lock.js
@@ -2,42 +2,53 @@ import * as bodyScrollLock from 'body-scroll-lock'
let previousNavPaddingRight
let previousAppBgWrapperRight
+let lockerEls = []
const disableBodyScroll = (el) => {
const scrollBarGap = window.innerWidth - document.documentElement.clientWidth
bodyScrollLock.disableBodyScroll(el, {
reserveScrollBarGap: true
})
+ if (!lockerEls.includes(el)) {
+ lockerEls.push(el)
+ }
setTimeout(() => {
- // If previousNavPaddingRight is already set, don't set it again.
- if (previousNavPaddingRight === undefined) {
- const navEl = document.getElementById('nav')
- previousNavPaddingRight = window.getComputedStyle(navEl).getPropertyValue('padding-right')
- navEl.style.paddingRight = previousNavPaddingRight ? `calc(${previousNavPaddingRight} + ${scrollBarGap}px)` : `${scrollBarGap}px`
+ if (lockerEls.length <= 1) {
+ // If previousNavPaddingRight is already set, don't set it again.
+ if (previousNavPaddingRight === undefined) {
+ const navEl = document.getElementById('nav')
+ previousNavPaddingRight = window.getComputedStyle(navEl).getPropertyValue('padding-right')
+ navEl.style.paddingRight = previousNavPaddingRight ? `calc(${previousNavPaddingRight} + ${scrollBarGap}px)` : `${scrollBarGap}px`
+ }
+ // If previousAppBgWrapeprRight is already set, don't set it again.
+ if (previousAppBgWrapperRight === undefined) {
+ const appBgWrapperEl = document.getElementById('app_bg_wrapper')
+ previousAppBgWrapperRight = window.getComputedStyle(appBgWrapperEl).getPropertyValue('right')
+ appBgWrapperEl.style.right = previousAppBgWrapperRight ? `calc(${previousAppBgWrapperRight} + ${scrollBarGap}px)` : `${scrollBarGap}px`
+ }
+ document.body.classList.add('scroll-locked')
}
- // If previousAppBgWrapeprRight is already set, don't set it again.
- if (previousAppBgWrapperRight === undefined) {
- const appBgWrapperEl = document.getElementById('app_bg_wrapper')
- previousAppBgWrapperRight = window.getComputedStyle(appBgWrapperEl).getPropertyValue('right')
- appBgWrapperEl.style.right = previousAppBgWrapperRight ? `calc(${previousAppBgWrapperRight} + ${scrollBarGap}px)` : `${scrollBarGap}px`
- }
- document.body.classList.add('scroll-locked')
})
}
const enableBodyScroll = (el) => {
+ if (lockerEls.includes(el)) {
+ lockerEls = lockerEls.filter(e => e !== el)
+ }
setTimeout(() => {
- if (previousNavPaddingRight !== undefined) {
- document.getElementById('nav').style.paddingRight = previousNavPaddingRight
- // Restore previousNavPaddingRight to undefined so disableBodyScroll knows it can be set again.
- previousNavPaddingRight = undefined
+ if (!lockerEls.length) {
+ if (previousNavPaddingRight !== undefined) {
+ document.getElementById('nav').style.paddingRight = previousNavPaddingRight
+ // Restore previousNavPaddingRight to undefined so disableBodyScroll knows it can be set again.
+ previousNavPaddingRight = undefined
+ }
+ if (previousAppBgWrapperRight !== undefined) {
+ document.getElementById('app_bg_wrapper').style.right = previousAppBgWrapperRight
+ // Restore previousAppBgWrapperRight to undefined so disableBodyScroll knows it can be set again.
+ previousAppBgWrapperRight = undefined
+ }
+ document.body.classList.remove('scroll-locked')
}
- if (previousAppBgWrapperRight !== undefined) {
- document.getElementById('app_bg_wrapper').style.right = previousAppBgWrapperRight
- // Restore previousAppBgWrapperRight to undefined so disableBodyScroll knows it can be set again.
- previousAppBgWrapperRight = undefined
- }
- document.body.classList.remove('scroll-locked')
})
bodyScrollLock.enableBodyScroll(el)
}