@@ -43,6 +44,10 @@
.media-modal-view {
z-index: 1001;
+ body:not(.scroll-locked) & {
+ display: none;
+ }
+
&:hover {
.modal-view-button-arrow {
opacity: 0.75;
diff --git a/src/directives/body_scroll_lock.js b/src/directives/body_scroll_lock.js
new file mode 100644
index 00000000..6ab20c3f
--- /dev/null
+++ b/src/directives/body_scroll_lock.js
@@ -0,0 +1,69 @@
+import * as bodyScrollLock from 'body-scroll-lock'
+
+let previousNavPaddingRight
+let previousAppBgWrapperRight
+
+const disableBodyScroll = (el) => {
+ const scrollBarGap = window.innerWidth - document.documentElement.clientWidth
+ bodyScrollLock.disableBodyScroll(el, {
+ reserveScrollBarGap: true
+ })
+ 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 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) => {
+ 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 (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)
+}
+
+const directive = {
+ inserted: (el, binding) => {
+ if (binding.value) {
+ disableBodyScroll(el)
+ }
+ },
+ componentUpdated: (el, binding) => {
+ if (binding.oldValue === binding.value) {
+ return
+ }
+
+ if (binding.value) {
+ disableBodyScroll(el)
+ } else {
+ enableBodyScroll(el)
+ }
+ },
+ unbind: (el) => {
+ enableBodyScroll(el)
+ }
+}
+
+export default (Vue) => {
+ Vue.directive('body-scroll-lock', directive)
+}
diff --git a/src/main.js b/src/main.js
index a43d31e2..7923ffe8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -27,6 +27,7 @@ import messages from './i18n/messages.js'
import VueChatScroll from 'vue-chat-scroll'
import VueClickOutside from 'v-click-outside'
import PortalVue from 'portal-vue'
+import VBodyScrollLock from './directives/body_scroll_lock'
import VTooltip from 'v-tooltip'
import afterStoreSetup from './boot/after_store.js'
@@ -39,6 +40,7 @@ Vue.use(VueI18n)
Vue.use(VueChatScroll)
Vue.use(VueClickOutside)
Vue.use(PortalVue)
+Vue.use(VBodyScrollLock)
Vue.use(VTooltip)
const i18n = new VueI18n({
diff --git a/yarn.lock b/yarn.lock
index d6c8b4a6..4e0d9a22 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1196,6 +1196,11 @@ body-parser@1.18.3, body-parser@^1.16.1:
raw-body "2.3.3"
type-is "~1.6.16"
+body-scroll-lock@^2.6.4:
+ version "2.6.4"
+ resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-2.6.4.tgz#567abc60ef4d656a79156781771398ef40462e94"
+ integrity sha512-NP08WsovlmxEoZP9pdlqrE+AhNaivlTrz9a0FF37BQsnOrpN48eNqivKkE7SYpM9N+YIPjsdVzfLAUQDBm6OQw==
+
boolbase@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"