use-scroll-lock

1import { useCallback, useRef, useState } from 'react'
2import { useIsomorphicLayoutEffect } from '@/registry/hooks/use-isomorphic-layout-effect'
3import { isBrowser } from '@/registry/lib/is-browser'
4 
5interface UseScrollLockOptions {
6  autoLock?: boolean
7  lockTarget?: HTMLElement | string
8  widthReflow?: boolean
9}
10 
11interface UseScrollLockReturn {
12  isLocked: boolean
13  lock: () => void
14  unlock: () => void
15}
16 
17interface OriginalStyle {
18  overflow: CSSStyleDeclaration['overflow']
19  paddingRight: CSSStyleDeclaration['paddingRight']
20}
21 
22export function useScrollLock(
23  options: UseScrollLockOptions = {},
24): UseScrollLockReturn {
25  const { autoLock = true, lockTarget, widthReflow = true } = options
26  const [isLocked, setIsLocked] = useState(false)
27  const target = useRef<HTMLElement | null>(null)
28  const originalStyle = useRef<OriginalStyle | null>(null)
29 
30  const lock = useCallback(() => {
31    if (target.current) {
32      const { overflow, paddingRight } = target.current.style
33 
34      // Save the original styles
35      originalStyle.current = { overflow, paddingRight }
36 
37      // Prevent width reflow
38      if (widthReflow) {
39        // Use window inner width if body is the target as global scrollbar isn't part of the document
40        const offsetWidth =
41          target.current === document.body
42            ? window.innerWidth
43            : target.current.offsetWidth
44        // Get current computed padding right in pixels
45        const currentPaddingRight =
46          Number.parseInt(
47            window.getComputedStyle(target.current).paddingRight,
48            10,
49          ) || 0
50 
51        const scrollbarWidth = offsetWidth - target.current.scrollWidth
52        target.current.style.paddingRight = `${scrollbarWidth + currentPaddingRight}px`
53      }
54 
55      // Lock the scroll
56      target.current.style.overflow = 'hidden'
57 
58      setIsLocked(true)
59    }
60  }, [widthReflow])
61 
62  const unlock = useCallback(() => {
63    if (target.current && originalStyle.current) {
64      target.current.style.overflow = originalStyle.current.overflow
65 
66      // Only reset padding right if we changed it
67      if (widthReflow) {
68        target.current.style.paddingRight = originalStyle.current.paddingRight
69      }
70    }
71 
72    setIsLocked(false)
73  }, [widthReflow])
74 
75  useIsomorphicLayoutEffect(() => {
76    if (!isBrowser) return
77 
78    if (lockTarget) {
79      target.current =
80        typeof lockTarget === 'string'
81          ? document.querySelector(lockTarget)
82          : lockTarget
83    }
84 
85// … truncated