useScrollLock

معرفی

هوک useScrollLock اسکرول صفحه را هنگام نمایش محتوای overlay (مانند modal، drawer، یا menu تمام‌صفحه) قفل می‌کند و هنگام بسته شدن آن‌ها بازگردانی می‌کند.

چه زمانی استفاده کنیم

• هنگام ساخت overlay یا modal سفارشی که از Radix UI استفاده نمی‌کند
• منوی تمام‌صفحه موبایل
• هر overlay سفارشی که نیاز به جلوگیری از اسکرول پس‌زمینه دارد

چه زمانی استفاده نکنیم

• با کامپوننت‌های Dialog، Sheet، و Drawer پرتو — آن‌ها خودشان اسکرول را مدیریت می‌کنند (از طریق Radix UI)
• برای tooltip یا popover — اسکرول پس‌زمینه باید فعال بماند

استفاده

import { useScrollLock } from '@parto-system-design/ui'

function FullScreenMenu({ isOpen }: { isOpen: boolean }) {
  useScrollLock(isOpen)

  if (!isOpen) return null

  return (
    <div className="fixed inset-0 bg-background z-50">
      <nav className="p-6 space-y-4">
        <a href="/dashboard">داشبورد</a>
        <a href="/analytics">تحلیل‌ها</a>
        <a href="/settings">تنظیمات</a>
      </nav>
    </div>
  )
}

پارامترها

مقدار بازگشتی

این هوک مقداری برنمی‌گرداند (void).

جزئیات فنی

• مکانیزم: document.body.style.overflow = 'hidden'
• بازگردانی: مقدار اولیه overflow هنگام cleanup بازگردانی می‌شود
• تو در تو: اگر چند کامپوننت همزمان اسکرول را قفل کنند، آخرین cleanup مقدار اولیه را بازمی‌گرداند

هوک‌های مرتبط

• اگر نیاز به تشخیص موبایل دارید (برای نمایش منوی تمام‌صفحه) → useIsMobile