♿️ Prevent scrolling of main content when modal or sheet are active

Author: Frontendland

astro.config.mjs.timestamp-1734374756635-978b266bfa22.mjs

@@ -124,6 +124,7 @@ export type Toast = {
 }
 
 declare module 'webcoreui' {
+    export const bodyFreeze: (freeze: boolean) => void
     export const classNames: (classes: any[]) => string
 
     export const setCookie: (name: string, value: string, days: number) => void

scripts/utilityTypes.js

@@ -0,0 +1,54 @@
+import { bodyFreeze } from '@utils/bodyFreeze'
+
+import {
+    afterEach,
+    beforeEach,
+    describe,
+    expect,
+    it,
+    vi
+} from 'vitest'
+
+describe('bodyFreeze', () => {
+    beforeEach(() => {
+        document.body.style.paddingRight = ''
+        document.body.style.overflow = ''
+
+        vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1024)
+        Object.defineProperty(document.body, 'clientWidth', {
+            configurable: true,
+            get: vi.fn(() => 1000)
+        })
+    })
+
+    afterEach(() => {
+        vi.restoreAllMocks()
+
+        document.body.style.paddingRight = ''
+        document.body.style.overflow = ''
+    })
+
+    it('should freeze the body (hide overflow and set padding)', () => {
+        bodyFreeze(true)
+
+        expect(document.body.style.overflow).toBe('hidden')
+        expect(document.body.style.paddingRight).toBe('24px') // 1024 - 1000 = 24
+    })
+
+    it('should unfreeze the body (reset styles) when freeze is false', () => {
+        bodyFreeze(true)
+        expect(document.body.style.overflow).toBe('hidden')
+
+        bodyFreeze(false)
+
+        expect(document.body.style.overflow).toBe('')
+        expect(document.body.style.paddingRight).toBe('')
+    })
+
+    it('should freeze the body by default when no arguments are passed', () => {
+        bodyFreeze()
+
+        expect(document.body.style.overflow).toBe('hidden')
+        expect(document.body.style.paddingRight).toBe('24px')
+    })
+})

src/tests/bodyFreeze.test.ts

@@ -0,0 +1,11 @@
+export const bodyFreeze = (freeze = true) => {
+    const scrollbarWidth = window.innerWidth - document.body.clientWidth
+
+    if (freeze) {
+        document.body.style.paddingRight = `${scrollbarWidth}px`
+        document.body.style.overflow = 'hidden'
+    } else {
+        document.body.style.paddingRight = ''
+        document.body.style.overflow = ''
+    }
+}

src/utils/bodyFreeze.ts

@@ -1,3 +1,5 @@
+import { bodyFreeze } from './bodyFreeze'
+
 export type ModalCallback = {
     trigger: Element | null
     modal: HTMLElement
@@ -33,6 +35,8 @@ export const modal = (config: Modal | string) => {
                 const listener = () => {
                     modalDOM.dataset.show = ''
 
+                    bodyFreeze(false)
+
                     onClose?.({
                         trigger: triggerDOM,
                         modal: modalDOM
@@ -50,6 +54,8 @@ export const modal = (config: Modal | string) => {
                     if (modalDOM.dataset.show && event.key === 'Escape') {
                         modalDOM.dataset.show = ''
 
+                        bodyFreeze(false)
+
                         onClose?.({
                             trigger: triggerDOM,
                             modal: modalDOM
@@ -70,6 +76,8 @@ export const modal = (config: Modal | string) => {
                 const listener = () => {
                     modalDOM.dataset.show = ''
 
+                    bodyFreeze(false)
+
                     onClose?.({
                         trigger: triggerDOM,
                         modal: modalDOM
@@ -86,6 +94,8 @@ export const modal = (config: Modal | string) => {
         const handleOpen = () => {
             modalDOM.dataset.show = 'true'
 
+            bodyFreeze()
+
             onOpen?.({
                 trigger: triggerDOM,
                 modal: modalDOM