handle multiple body scroll lockers

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 (lockerEls.length <= 1) {
-    if (previousNavPaddingRight === undefined) {
+      // If previousNavPaddingRight is already set, don't set it again.
-      const navEl = document.getElementById('nav')
+      if (previousNavPaddingRight === undefined) {
-      previousNavPaddingRight = window.getComputedStyle(navEl).getPropertyValue('padding-right')
+        const navEl = document.getElementById('nav')
-      navEl.style.paddingRight = previousNavPaddingRight ? `calc(${previousNavPaddingRight} + ${scrollBarGap}px)` : `${scrollBarGap}px`
+        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) {
+      // If previousAppBgWrapeprRight is already set, don't set it again.
-      const appBgWrapperEl = document.getElementById('app_bg_wrapper')
+      if (previousAppBgWrapperRight === undefined) {
-      previousAppBgWrapperRight = window.getComputedStyle(appBgWrapperEl).getPropertyValue('right')
+        const appBgWrapperEl = document.getElementById('app_bg_wrapper')
-      appBgWrapperEl.style.right = previousAppBgWrapperRight ? `calc(${previousAppBgWrapperRight} + ${scrollBarGap}px)` : `${scrollBarGap}px`
+        previousAppBgWrapperRight = window.getComputedStyle(appBgWrapperEl).getPropertyValue('right')
+        appBgWrapperEl.style.right = previousAppBgWrapperRight ? `calc(${previousAppBgWrapperRight} + ${scrollBarGap}px)` : `${scrollBarGap}px`
+      }
+      document.body.classList.add('scroll-locked')
     }
-    document.body.classList.add('scroll-locked')
   })
 }
 
 const enableBodyScroll = (el) => {
+  if (lockerEls.includes(el)) {
+    lockerEls = lockerEls.filter(e => e !== el)
+  }
   setTimeout(() => {
-    if (previousNavPaddingRight !== undefined) {
+    if (!lockerEls.length) {
-      document.getElementById('nav').style.paddingRight = previousNavPaddingRight
+      if (previousNavPaddingRight !== undefined) {
-      // Restore previousNavPaddingRight to undefined so disableBodyScroll knows it can be set again.
+        document.getElementById('nav').style.paddingRight = previousNavPaddingRight
-      previousNavPaddingRight = undefined
+        // 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
+      if (previousAppBgWrapperRight !== undefined) {
-      // Restore previousAppBgWrapperRight to undefined so disableBodyScroll knows it can be set again.
+        document.getElementById('app_bg_wrapper').style.right = previousAppBgWrapperRight
-      previousAppBgWrapperRight = undefined
+        // Restore previousAppBgWrapperRight to undefined so disableBodyScroll knows it can be set again.
+        previousAppBgWrapperRight = undefined
+      }
+      document.body.classList.remove('scroll-locked')
     }
-    document.body.classList.remove('scroll-locked')
   })
   bodyScrollLock.enableBodyScroll(el)
 }