├── .gitignore
├── CHANGELOG.md
├── README.md
├── example
    ├── README.md
    ├── app
    │   ├── Example.tsx
    │   ├── Modal.tsx
    │   ├── favicon.ico
    │   ├── globals.css
    │   ├── layout.tsx
    │   └── page.tsx
    ├── next-env.d.ts
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.mjs
    ├── renoun.json
    ├── tailwind.config.ts
    └── tsconfig.json
├── index.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .next
3 | .turbo
4 | .vercel
5 | dist
6 | node_modules
7 | out
8 | 
9 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # lock-scrollbars
 2 | 
 3 | # 0.4.1
 4 | 
 5 | - Uses position fixed and scroll restoration to prevent scrolling in Safari
 6 | 
 7 | # 0.4.0
 8 | 
 9 | - Uses `AbortController` to remove events, resulting in less code.
10 | - Prevents selecting text in background except for Safari.
11 | - Moves to stable scrollbar and overflow hidden styles.
12 | 
13 | # 0.3.4
14 | 
15 | - Fixes being able to drag the scrollbar with the mouse by collapsing the
16 |   scrollbar width when the scroll lock is active.
17 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # lock-scrollbars
 2 | 
 3 | Lock all scrollbars recursively to prevent scrolling the page. Useful for
 4 | modals, popovers, and other UI elements that require user interaction before
 5 | continuing.
 6 | 
 7 | ## Features
 8 | 
 9 | - Locks all scrollbars on the page
10 | - Allows a specific scrollable element
11 | - Supports nested scroll locks (e.g. popover within a modal)
12 | 
13 | [View Example](https://lock-scrollbars.vercel.app/)
14 | 
15 | ## Installation
16 | 
17 | ```bash
18 | npm install lock-scrollbars
19 | ```
20 | 
21 | ## Usage
22 | 
23 | ```ts
24 | import { lockScrollbars } from 'lock-scrollbars'
25 | 
26 | const unlockScrollbars = lockScrollbars()
27 | 
28 | // ...open a modal or popover
29 | 
30 | unlockScrollbars()
31 | ```
32 | 
33 | ### React Example
34 | 
35 | ```tsx
36 | import React, { useRef, useEffect } from 'react'
37 | import { lockScrollbars } from 'lock-scrollbars'
38 | 
39 | function Modal({
40 |   open,
41 |   children,
42 | }: {
43 |   open: boolean
44 |   children: React.ReactNode
45 | }) {
46 |   const dialogRef = useRef<HTMLDialogElement>(null)
47 |   const unlockScrollbars = useRef<ReturnType<typeof lockScrollbars> | null>(
48 |     null
49 |   )
50 | 
51 |   useEffect(() => {
52 |     const dialogNode = dialogRef.current
53 |     if (dialogNode) {
54 |       if (open) {
55 |         dialogNode.showModal()
56 |         unlockScrollbars.current = lockScrollbars(dialogNode)
57 |       } else {
58 |         dialogNode.close()
59 |         unlockScrollbars.current?.()
60 |       }
61 |     }
62 |   }, [open])
63 | 
64 |   return <dialog ref={dialogRef}>{children}</dialog>
65 | }
66 | ```
67 | 
68 | ## Development
69 | 
70 | ```bash
71 | cd example
72 | npm install
73 | npm run dev
74 | ```
75 | 


--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 | 
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 | 
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 | 
21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22 | 
23 | ## Learn More
24 | 
25 | To learn more about Next.js, take a look at the following resources:
26 | 
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 | 
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31 | 
32 | ## Deploy on Vercel
33 | 
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 | 
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
37 | 


--------------------------------------------------------------------------------
/example/app/Example.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | import { useState } from 'react'
 3 | import { Modal } from './Modal'
 4 | 
 5 | export function Example() {
 6 |   const [open, setOpen] = useState(false)
 7 | 
 8 |   return (
 9 |     <>
10 |       <button
11 |         onClick={() => setOpen(true)}
12 |         className="shrink-0 bg-gray-600 text-white min-h-[2lh] px-4 rounded"
13 |       >
14 |         Open modal
15 |       </button>
16 |       <Modal open={open} onRequestClose={() => setOpen(false)}>
17 |         <div className="bg-white rounded-lg shadow-xl p-6 md:min-w-96 mx-auto">
18 |           <div className="flex justify-between items-center mb-4">
19 |             <h2 className="text-lg font-semibold">Modal Title</h2>
20 |             <button
21 |               onClick={() => setOpen(false)}
22 |               className="text-gray-600 hover:text-gray-900"
23 |             >
24 |               ✕
25 |             </button>
26 |           </div>
27 |           <form
28 |             onSubmit={(event) => {
29 |               event.preventDefault()
30 |               setOpen(false)
31 |             }}
32 |           >
33 |             <div className="mb-4">
34 |               <label
35 |                 htmlFor="name"
36 |                 className="block text-sm font-medium text-gray-700"
37 |               >
38 |                 Name
39 |               </label>
40 |               <input
41 |                 type="text"
42 |                 id="name"
43 |                 name="name"
44 |                 className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
45 |               />
46 |             </div>
47 |             <div className="mb-4">
48 |               <label
49 |                 htmlFor="email"
50 |                 className="block text-sm font-medium text-gray-700"
51 |               >
52 |                 Email
53 |               </label>
54 |               <input
55 |                 type="email"
56 |                 id="email"
57 |                 name="email"
58 |                 className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
59 |               />
60 |             </div>
61 |             <div className="mb-6">
62 |               <label
63 |                 htmlFor="message"
64 |                 className="block text-sm font-medium text-gray-700"
65 |               >
66 |                 Message
67 |               </label>
68 |               <textarea
69 |                 id="message"
70 |                 name="message"
71 |                 rows={4}
72 |                 className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
73 |               />
74 |             </div>
75 |             <div className="flex justify-end">
76 |               <button
77 |                 type="submit"
78 |                 className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-700"
79 |               >
80 |                 Submit
81 |               </button>
82 |             </div>
83 |           </form>
84 |         </div>
85 |       </Modal>
86 |     </>
87 |   )
88 | }
89 | 


--------------------------------------------------------------------------------
/example/app/Modal.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { lockScrollbars } from '../../index'
 3 | 
 4 | /**
 5 |  * Displays content in a foreground window that temporarily disables interaction with the underlying page.
 6 |  * Learn how to build this at: https://souporserious.com/build-a-dialog-component-in-react/
 7 |  */
 8 | export function Modal({
 9 |   closeOnOutsideClick = true,
10 |   onRequestClose,
11 |   open,
12 |   children,
13 | }: {
14 |   closeOnOutsideClick?: boolean
15 |   onRequestClose: () => void
16 |   open: boolean
17 |   children: React.ReactNode
18 | }) {
19 |   const dialogRef = React.useRef<HTMLDialogElement | null>(null)
20 |   const lastActiveElement = React.useRef<HTMLElement | null>(null)
21 |   const unlockScrollbars = React.useRef<ReturnType<
22 |     typeof lockScrollbars
23 |   > | null>(null)
24 | 
25 |   React.useEffect(() => {
26 |     const dialogNode = dialogRef.current
27 |     if (dialogNode) {
28 |       if (open) {
29 |         if (document.activeElement instanceof HTMLElement) {
30 |           lastActiveElement.current = document.activeElement
31 |         }
32 |         dialogNode?.showModal()
33 |         unlockScrollbars.current = lockScrollbars(dialogNode)
34 |       } else {
35 |         dialogNode?.close()
36 |         unlockScrollbars.current?.()
37 |         lastActiveElement.current?.focus()
38 |       }
39 |     }
40 |   }, [open])
41 | 
42 |   React.useEffect(() => {
43 |     const dialogNode = dialogRef.current
44 |     const handleCancel = (event: Event) => {
45 |       event.preventDefault()
46 |       onRequestClose()
47 |     }
48 |     dialogNode?.addEventListener('cancel', handleCancel)
49 |     return () => {
50 |       dialogNode?.removeEventListener('cancel', handleCancel)
51 |     }
52 |   }, [onRequestClose])
53 | 
54 |   function handleOutsideClick(event: React.MouseEvent<HTMLDialogElement>) {
55 |     const dialogNode = dialogRef.current
56 |     if (closeOnOutsideClick && event.target === dialogNode) {
57 |       onRequestClose()
58 |     }
59 |   }
60 | 
61 |   return (
62 |     <dialog ref={dialogRef} style={{ padding: 0 }} onClick={handleOutsideClick}>
63 |       {children}
64 |     </dialog>
65 |   )
66 | }
67 | 


--------------------------------------------------------------------------------
/example/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/souporserious/lock-scrollbars/019596aba8a67da76c450f3840b03fddeca5404a/example/app/favicon.ico


--------------------------------------------------------------------------------
/example/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | :root {
 6 |   --foreground: theme(colors.black);
 7 |   --background: theme(colors.white);
 8 | }
 9 | 
10 | @media (prefers-color-scheme: dark) {
11 |   :root {
12 |     --foreground: theme(colors.white);
13 |     --background: theme(colors.gray.800);
14 |   }
15 | }
16 | 
17 | body {
18 |   color: var(--foreground);
19 |   background-color: var(--background);
20 | }
21 | 
22 | @layer utilities {
23 |   .text-balance {
24 |     text-wrap: balance;
25 |   }
26 | }
27 | 
28 | ::backdrop {
29 |   backdrop-filter: blur(0.15rem);
30 | }
31 | 


--------------------------------------------------------------------------------
/example/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from 'next'
 2 | import { Inter } from 'next/font/google'
 3 | import './globals.css'
 4 | 
 5 | const inter = Inter({ subsets: ['latin'] })
 6 | 
 7 | export const metadata: Metadata = {
 8 |   title: 'lock-scrollbars',
 9 |   description: 'A small browser utility to lock all scrollbars.',
10 | }
11 | 
12 | export default function RootLayout({
13 |   children,
14 | }: Readonly<{
15 |   children: React.ReactNode
16 | }>) {
17 |   return (
18 |     <html lang="en">
19 |       <body className={inter.className}>{children}</body>
20 |     </html>
21 |   )
22 | }
23 | 


--------------------------------------------------------------------------------
/example/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import { CodeBlock, CodeInline, GitProviderLink } from 'renoun/components'
 2 | import { RenounLogoLink } from 'renoun/assets'
 3 | import { Example } from './Example'
 4 | 
 5 | const exampleCode = `
 6 | 'use client'
 7 | import React, { useEffect, useState } from 'react'
 8 | import { lockScrollbars } from 'lock-scrollbars'
 9 | 
10 | function Modal({ open, children }) {
11 |   const dialogRef = React.useRef(null)
12 |   const unlockScrollbars = React.useRef(null)
13 | 
14 |   useEffect(() => {
15 |     const dialogNode = dialogRef.current
16 |     if (dialogNode) {
17 |       if (open) {
18 |         dialogNode.showModal()
19 |         unlockScrollbars.current = lockScrollbars()
20 |       } else {
21 |         dialogNode.close()
22 |         unlockScrollbars.current?.()
23 |       }
24 |     }
25 |   }, [open])
26 | 
27 |   return <dialog ref={dialogRef}>{children}</dialog>
28 | }
29 | `
30 | 
31 | export default function Page() {
32 |   return (
33 |     <>
34 |       <main className="flex flex-col min-h-screen max-w-screen-xl p-8 mx-auto gap-8 bg-white dark:bg-gray-800">
35 |         <div className="flex-1 grid grid-cols-1 md:grid-cols-3 items-center gap-8">
36 |           <div className="space-y-4">
37 |             <div className="space-y-2">
38 |               <h2 className="text-3xl font-bold tracking-tighter text-gray-900 dark:text-white sm:text-5xl">
39 |                 lock-scrollbars
40 |               </h2>
41 |               <p className="max-w-[900px] text-gray-500 dark:text-gray-400 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
42 |                 A small browser utility to lock all scrollbars recursively.
43 |               </p>
44 |             </div>
45 |             <GitProviderLink />
46 |           </div>
47 |           <div className="md:col-span-2">
48 |             <CodeBlock
49 |               children={exampleCode}
50 |               language="tsx"
51 |               highlightedLines="3,7,14,17"
52 |               focusedLines="3,7,14,17"
53 |             />
54 |           </div>
55 |         </div>
56 | 
57 |         <div className="grid grid-cols-1 md:grid-cols-3 py-6 gap-8 text-gray-900 dark:text-gray-200">
58 |           <div className="flex flex-col gap-3">
59 |             <h2 className="text-xl font-bold">Installation</h2>
60 |             <CodeBlock children="npm install lock-scrollbars" language="bash" />
61 |           </div>
62 | 
63 |           <div className="flex flex-col gap-3">
64 |             <h2 className="text-xl font-bold">Usage</h2>
65 |             <p>
66 |               Lock and unlock scrollbars programmatically using&nbsp;
67 |               <CodeInline children="lockScrollbars" />.
68 |             </p>
69 |           </div>
70 | 
71 |           <div className="flex flex-col gap-3">
72 |             <h2 className="text-xl font-bold">Example</h2>
73 |             <div className="flex flex-col items-start lg:flex-row gap-4">
74 |               <Example />
75 |               <p>Open an example modal to lock the scrollbar.</p>
76 |             </div>
77 |           </div>
78 |         </div>
79 |       </main>
80 |       <footer className="flex items-center justify-center p-4 gap-2">
81 |         <span className="text-gray-500 dark:text-gray-400">Site built with</span>
82 |         <RenounLogoLink className="h-4" />
83 |       </footer>
84 |     </>
85 |   )
86 | }
87 | 


--------------------------------------------------------------------------------
/example/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | 
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
6 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "react": "^18",
12 |     "react-dom": "^18",
13 |     "lock-scrollbars": "file:../",
14 |     "next": "15.3.1",
15 |     "renoun": "^8.13.1"
16 |   },
17 |   "devDependencies": {
18 |     "typescript": "^5",
19 |     "@types/node": "^20",
20 |     "@types/react": "^18",
21 |     "@types/react-dom": "^18",
22 |     "postcss": "^8",
23 |     "tailwindcss": "^3.4.1"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/example/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/example/renoun.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://renoun.dev/schema.json",
3 |   "git": { "source": "https://github.com/souporserious/lock-scrollbars" },
4 |   "siteUrl": "https://lock-scrollbars.vercel.app/"
5 | }
6 | 


--------------------------------------------------------------------------------
/example/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from 'tailwindcss'
 2 | 
 3 | const config: Config = {
 4 |   content: [
 5 |     './pages/**/*.{js,ts,jsx,tsx,mdx}',
 6 |     './components/**/*.{js,ts,jsx,tsx,mdx}',
 7 |     './app/**/*.{js,ts,jsx,tsx,mdx}',
 8 |   ],
 9 |   theme: {},
10 |   plugins: [],
11 | }
12 | export default config
13 | 


--------------------------------------------------------------------------------
/example/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": [
 4 |       "dom",
 5 |       "dom.iterable",
 6 |       "esnext"
 7 |     ],
 8 |     "allowJs": true,
 9 |     "skipLibCheck": true,
10 |     "strict": true,
11 |     "noEmit": true,
12 |     "esModuleInterop": true,
13 |     "module": "esnext",
14 |     "moduleResolution": "bundler",
15 |     "resolveJsonModule": true,
16 |     "isolatedModules": true,
17 |     "jsx": "preserve",
18 |     "incremental": true,
19 |     "plugins": [
20 |       {
21 |         "name": "next"
22 |       }
23 |     ],
24 |     "paths": {
25 |       "@/*": [
26 |         "./*"
27 |       ]
28 |     },
29 |     "target": "ES2017"
30 |   },
31 |   "include": [
32 |     "next-env.d.ts",
33 |     "**/*.ts",
34 |     "**/*.tsx",
35 |     ".next/types/**/*.ts"
36 |   ],
37 |   "exclude": [
38 |     "node_modules"
39 |   ]
40 | }
41 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | const scrollCoords = new WeakMap()
  2 | let rafId
  3 | 
  4 | /** @param {HTMLElement} node */
  5 | function lockScroll(node) {
  6 |   const scrollElementCoords = scrollCoords.get(node)
  7 |   if (scrollElementCoords) {
  8 |     node.scrollLeft = scrollElementCoords.x
  9 |     node.scrollTop = scrollElementCoords.y
 10 |   }
 11 |   rafId = requestAnimationFrame(() => lockScroll(node))
 12 | }
 13 | 
 14 | function cancelLockScroll() {
 15 |   // wait one frame before canceling the scroll lock to prevent scrollbar jump
 16 |   requestAnimationFrame(() => cancelAnimationFrame(rafId))
 17 | }
 18 | 
 19 | function getScrollableElements(node) {
 20 |   return Array.from((node || document).querySelectorAll('*')).filter((node) => {
 21 |     const computedStyle = window.getComputedStyle(node)
 22 |     const overflow = computedStyle.getPropertyValue('overflow')
 23 |     const overflowX = computedStyle.getPropertyValue('overflow-x')
 24 |     const overflowY = computedStyle.getPropertyValue('overflow-y')
 25 |     return (
 26 |       overflow === 'auto' ||
 27 |       overflow === 'scroll' ||
 28 |       overflowX === 'auto' ||
 29 |       overflowX === 'scroll' ||
 30 |       overflowY === 'auto' ||
 31 |       overflowY === 'scroll'
 32 |     )
 33 |   })
 34 | }
 35 | 
 36 | function preventScrollKeys(event) {
 37 |   const scrollKeys = [
 38 |     'Space',
 39 |     'PageUp',
 40 |     'PageDown',
 41 |     'End',
 42 |     'Home',
 43 |     'ArrowLeft',
 44 |     'ArrowUp',
 45 |     'ArrowRight',
 46 |     'ArrowDown',
 47 |   ]
 48 |   if (scrollKeys.includes(event.key)) {
 49 |     event.preventDefault()
 50 |   }
 51 | }
 52 | 
 53 | const getCanScrollX = (node) => node.scrollWidth > node.clientWidth
 54 | const getCanScrollY = (node) => node.scrollHeight > node.clientHeight
 55 | const preventDefault = (event) => event.preventDefault()
 56 | 
 57 | /** @type {HTMLStyleElement} */
 58 | let style
 59 | let lockedScrolls = []
 60 | 
 61 | /**
 62 |  * Lock all scrollbars by disabling mousewheel and locking scrollbars in position.
 63 |  * Optionally provide a specific element to allow scrolling.
 64 |  * @param {HTMLElement|null} node - The DOM element to allow scrolling on hover.
 65 |  * @returns {() => void} - Function to unlock the scrollbars.
 66 |  */
 67 | function lockScrollbars(node = null) {
 68 |   const scrollX = window.scrollX
 69 |   const scrollY = window.scrollY
 70 | 
 71 |   document.documentElement.style.scrollbarGutter = 'stable'
 72 |   document.body.style.overflowY = 'hidden'
 73 |   document.body.style.position = 'fixed'
 74 |   document.body.style.inset = `-${scrollY}px 0 0 -${scrollX}px`
 75 | 
 76 |   const wheelKeydownEventsController = new AbortController()
 77 |   const mouseOver = () => {
 78 |     wheelKeydownEventsController.abort()
 79 |   }
 80 |   const mouseOut = () => {
 81 |     window.addEventListener('wheel', preventDefault, {
 82 |       capture: true,
 83 |       passive: false,
 84 |       signal: wheelKeydownEventsController.signal,
 85 |     })
 86 |     window.addEventListener('keydown', preventScrollKeys, {
 87 |       capture: true,
 88 |       passive: false,
 89 |       signal: wheelKeydownEventsController.signal,
 90 |     })
 91 |   }
 92 |   const mouseDown = (event) => {
 93 |     if (event.target !== node) {
 94 |       scrollCoords.set(event.target, {
 95 |         x: event.target.scrollLeft,
 96 |         y: event.target.scrollTop,
 97 |       })
 98 |       lockScroll(event.target)
 99 |     }
100 |   }
101 |   const mouseUp = (event) => {
102 |     cancelLockScroll()
103 |     scrollCoords.delete(event.target)
104 |   }
105 |   const wheelLock = (event) => {
106 |     const scrollableDistance = node.scrollHeight - node.offsetHeight
107 |     const isTarget = node === event.target
108 |     const isChildOfTarget = node.contains(event.target)
109 | 
110 |     if (scrollableDistance > 0 && !isTarget && isChildOfTarget) {
111 |       return
112 |     }
113 | 
114 |     if (
115 |       isTarget ||
116 |       (event.deltaY > 0 && node.scrollTop >= scrollableDistance) ||
117 |       (event.deltaY < 0 && node.scrollTop <= 0)
118 |     ) {
119 |       event.preventDefault()
120 |     }
121 |   }
122 |   const scrollables = getScrollableElements(node)
123 |   const eventController = new AbortController()
124 |   let className
125 | 
126 |   function create() {
127 |     // make sure wheel/keys are blocked unless hovered on the exception node
128 |     if (node) {
129 |       node.addEventListener('mouseover', mouseOver, {
130 |         capture: true,
131 |         signal: eventController.signal,
132 |       })
133 |       node.addEventListener('mouseout', mouseOut, {
134 |         capture: true,
135 |         signal: eventController.signal,
136 |       })
137 |       mouseOut()
138 |     }
139 |     window.addEventListener('mousedown', mouseDown, {
140 |       capture: true,
141 |       signal: eventController.signal,
142 |     })
143 |     window.addEventListener('mouseup', mouseUp, {
144 |       capture: true,
145 |       signal: eventController.signal,
146 |     })
147 |     window.addEventListener('wheel', wheelLock, {
148 |       capture: true,
149 |       passive: false,
150 |       signal: eventController.signal,
151 |     })
152 |     window.addEventListener('keydown', preventScrollKeys, {
153 |       capture: true,
154 |       passive: false,
155 |       signal: eventController.signal,
156 |     })
157 | 
158 |     const shouldCreateStyle = style === undefined
159 | 
160 |     if (shouldCreateStyle) {
161 |       style = document.createElement('style')
162 |     }
163 | 
164 |     // set touch-action on all scrollables so they don't flicker/overscroll
165 |     scrollables.forEach((scrollableNode) => {
166 |       const canScrollX = getCanScrollX(scrollableNode)
167 |       const canScrollY = getCanScrollY(scrollableNode)
168 |       let touchAction = 'none'
169 | 
170 |       if (canScrollX && canScrollY) {
171 |         touchAction = 'auto'
172 |       } else if (canScrollX) {
173 |         touchAction = 'pan-x'
174 |       } else if (canScrollY) {
175 |         touchAction = 'pan-y'
176 |       }
177 | 
178 |       scrollableNode.style.touchAction = touchAction
179 |     })
180 | 
181 |     const styles = `
182 | * {
183 |   pointer-events: none;
184 | }
185 | 
186 | *, ::backdrop {
187 |   touch-action: none;
188 | }
189 | `.trim()
190 | 
191 |     if (node) {
192 |       const canScrollX = getCanScrollX(node)
193 |       const canScrollY = getCanScrollY(node)
194 |       let touchAction = 'none'
195 | 
196 |       if (canScrollX && canScrollY) {
197 |         touchAction = 'auto'
198 |       } else if (canScrollX) {
199 |         touchAction = 'pan-x'
200 |       } else if (canScrollY) {
201 |         touchAction = 'pan-y'
202 |       }
203 | 
204 |       className = `ls${Math.random().toString(36).slice(2)}`
205 |       node.classList.add(className)
206 |       style.innerHTML = `
207 | ${styles}
208 | 
209 | .${className}, .${className} * {
210 |   pointer-events: auto;
211 |   overscroll-behavior: contain;
212 |   touch-action: ${touchAction};
213 | }
214 | `.trim()
215 |     } else {
216 |       style.innerHTML = styles
217 |     }
218 | 
219 |     if (shouldCreateStyle) {
220 |       document.head.appendChild(style)
221 |     }
222 |   }
223 | 
224 |   function destroy() {
225 |     eventController.abort()
226 | 
227 |     if (node) {
228 |       mouseOver()
229 |       node.classList.remove(className)
230 |     }
231 | 
232 |     scrollables.forEach((scrollableNode) => {
233 |       scrollableNode.style.touchAction = ''
234 |     })
235 |   }
236 | 
237 |   // if there’s already a lock in place, tear down the topmost one first
238 |   if (lockedScrolls.length > 0) {
239 |     lockedScrolls[lockedScrolls.length - 1].destroy()
240 |     lockedScrolls = lockedScrolls.filter((ls) =>
241 |       document.body.contains(ls.node)
242 |     )
243 |   }
244 | 
245 |   // add our new lock
246 |   if (document.body.contains(node)) {
247 |     lockedScrolls.push({ node, create, destroy })
248 |     create()
249 |   }
250 | 
251 |   // re-create on orientation change
252 |   const orientationMediaQuery = window.matchMedia('(orientation: portrait)')
253 |   orientationMediaQuery.onchange = () => {
254 |     destroy()
255 |     create()
256 |   }
257 | 
258 |   return () => {
259 |     const index = lockedScrolls.findIndex(
260 |       (lockedScroll) => lockedScroll.node === node
261 |     )
262 | 
263 |     if (index > -1) {
264 |       orientationMediaQuery.onchange = undefined
265 | 
266 |       destroy()
267 |       lockedScrolls.splice(index, 1)
268 | 
269 |       // again, filter any nodes that may be gone from the DOM now
270 |       lockedScrolls = lockedScrolls.filter((lockedScroll) => {
271 |         const containsLockedScrollNode = document.body.contains(
272 |           lockedScroll.node
273 |         )
274 |         // as a side effect, make sure to remove listeners from this node
275 |         if (containsLockedScrollNode === false) {
276 |           lockedScroll.destroy()
277 |         }
278 |         return containsLockedScrollNode
279 |       })
280 | 
281 |       // enable the previous scroll lock if any are left
282 |       if (lockedScrolls.length > 0) {
283 |         lockedScrolls[lockedScrolls.length - 1].create()
284 |       }
285 |     }
286 | 
287 |     // if no more locks, remove our style element and restore padding
288 |     if (lockedScrolls.length === 0) {
289 |       style.remove()
290 |       style = undefined
291 | 
292 |       // clean up styles
293 |       document.body.style.position = ''
294 |       document.body.style.inset = ''
295 |       document.body.style.overflowY = ''
296 | 
297 |       // restore scroll position
298 |       window.scroll(0, scrollY)
299 | 
300 |       // wait one frame before removing the scrollbar gutter to prevent scrollbar jump
301 |       requestAnimationFrame(() => {
302 |         document.documentElement.style.scrollbarGutter = ''
303 |       })
304 |     }
305 |   }
306 | }
307 | 
308 | module.exports = { lockScrollbars }
309 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "lock-scrollbars",
 3 |   "version": "0.4.1",
 4 |   "description": "Utility to lock all scrollbars recursively, optionally allowing for a single scrollbar to be unlocked.",
 5 |   "main": "index.js",
 6 |   "files": [
 7 |     "index.js"
 8 |   ],
 9 |   "author": "Travis Arnold (http://souporserious.com)",
10 |   "license": "MIT",
11 |   "bugs": {
12 |     "url": "https://github.com/souporserious/lock-scrollbars/issues"
13 |   },
14 |   "homepage": "https://github.com/souporserious/lock-scrollbars",
15 |   "keywords": [
16 |     "scroll",
17 |     "lock",
18 |     "disable",
19 |     "modal",
20 |     "popover",
21 |     "dialog",
22 |     "overlay"
23 |   ]
24 | }
25 | 


--------------------------------------------------------------------------------