AkkomaGang/akkoma-fe
5
13
Fork 64
Code Issues 81 Pull requests 19 Projects Releases 1 Wiki Activity

handle multiple body scroll lockers

Browse source
This commit is contained in:
taehoon 2019-10-17 16:03:41 -04:00
parent 8db1fa506c
commit 093d785fbf
1 changed files with 33 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
src/directives/body_scroll_lock.js
View file

@ -2,42 +2,53 @@ import * as bodyScrollLock from 'body-scroll-lock'
let previousNavPaddingRight let previousNavPaddingRight
let previousAppBgWrapperRight let previousAppBgWrapperRight
let lockerEls = []
const disableBodyScroll = (el) => { const disableBodyScroll = (el) => {
const scrollBarGap = window.innerWidth - document.documentElement.clientWidth const scrollBarGap = window.innerWidth - document.documentElement.clientWidth
bodyScrollLock.disableBodyScroll(el, { bodyScrollLock.disableBodyScroll(el, {
reserveScrollBarGap: true reserveScrollBarGap: true
}) })
if (!lockerEls.includes(el)) {
lockerEls.push(el)
}
setTimeout(() => { 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) {
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) => { const enableBodyScroll = (el) => {
if (lockerEls.includes(el)) {
lockerEls = lockerEls.filter(e => e !== el)
}
setTimeout(() => { 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
// 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) bodyScrollLock.enableBodyScroll(el)
} }