packages/hooks/src/useBodyScrollLock/useBodyScrollLock.ts - develop - bearury/ui-kit-ce

packages/hooks/src/useBodyScrollLock/useBodyScrollLock.ts

72 строки2 KB

Denis Svyatovets

fix(divider,modal): исправлен скролл содержимого Modal, Drawer в Safari на iOS

06 авг 2025, 18:23

06 авг 2025, 18:23f11adab

import * as React from 'react'
import {
  enableBodyScroll,
  disableBodyScroll,
  BodyScrollOptions,
} from '@v-uik/utils'

export interface UseBodyScrollLockResult<MountRefElement extends HTMLElement> {
  /**
   * Функция разблокировки скролла body.
   *
   * @returns
   */
  enableBodyScroll: typeof enableBodyScroll
  /**
   * Функция блокировки скролла body.
   *
   * @returns
   */
  disableBodyScroll: typeof disableBodyScroll
  /**
   * Ссылка на элемент, при монтировании которого будет блокироваться скролл.
   *
   * @returns
   */
  lockOnMountNodeRef: (node: MountRefElement) => void
  /**
   * Ссылка на элемент, при размонтировании которого будет разблокироваться скролл.
   *
   * @returns
   */
  unlockOnUnmountNodeRef: (node: MountRefElement) => void
}

/**
 * Блокирует прокрутку тела страницы при монтировании элемента.
 *
 * @param options
 */
export const useBodyScrollLock = <
  MountRefElement extends HTMLElement = HTMLDivElement
>(
  options?: BodyScrollOptions
): UseBodyScrollLockResult<MountRefElement> => {
  const innerRef = React.useRef<MountRefElement | null>(null)

  const lockOnMountNodeRef = React.useCallback(
    (node: MountRefElement) => {
      if (node) {
        disableBodyScroll(node, { reserveScrollBarGap: true, ...options })
      } else {
        enableBodyScroll(innerRef.current as MountRefElement)
      }
      innerRef.current = node
    },
    [options]
  )

  const unlockOnUnmountNodeRef = React.useCallback((node: MountRefElement) => {
    if (!node) {
      enableBodyScroll(innerRef.current as MountRefElement)
    }
    innerRef.current = node
  }, [])

  return {
    enableBodyScroll,
    disableBodyScroll,
    lockOnMountNodeRef,
    unlockOnUnmountNodeRef,
  }
}