جلوگیری از اسکرول صفحه هنگام نمایش لایت‌باکس در المنتور

🔥 آموزش جلوگیری از اسکرول صفحه هنگام نمایش لایت‌باکس در المنتور

اگر در المنتور یک گالری تصاویر بسازید و قابلیت لایت‌باکس را فعال کنید، هنگام کلیک روی تصاویر، آنها در یک پنجره پاپ‌آپ باز می‌شوند که جلوه زیبایی به سایت شما می‌دهد. اما مشکلی که وجود دارد این است که هنوز امکان اسکرول در پس‌زمینه وجود دارد! 🤯

این مشکل باعث می‌شود که کاربر همچنان بتواند صفحه را بالا و پایین کند، درحالی‌که ما می‌خواهیم وقتی تصویر باز است، صفحه کاملاً ثابت بماند و کاربر فقط روی همان تصویر تمرکز کند. ✅

🚀 راه‌حل چیست؟

با یک خط CSS جادویی می‌توانیم این مشکل را برطرف کنیم. کافی است کد زیر را به سایت خود اضافه کنید تا هنگام باز شدن لایت‌باکس، اسکرول پس‌زمینه غیرفعال شود:

/* Amirrezarahmani.ir */
:is(html,body):has(.elementor-lightbox:not([style*="display"])) {
    overflow: hidden;
}

🧐 این کد چطور کار می‌کند؟

1. :is(html,body) → این انتخابگر هم روی html و هم روی body اعمال می‌شود تا کل صفحه را کنترل کند.

2. :has(.elementor-lightbox:not([style*="display"])) → بررسی می‌کند که آیا المنت لایت‌باکس در صفحه وجود دارد یا نه.

   • .elementor-lightbox همان پنجره بازشو تصاویر است.

   • :not([style*="display"]) بررسی می‌کند که این المنت مخفی نشده باشد (یعنی در حال نمایش باشد).

3. overflow: hidden; → وقتی لایت‌باکس باز باشد، اسکرول صفحه را غیرفعال می‌کند.

📌 چطور استفاده کنیم؟

این کد را می‌توانید در سفارشی‌سازی CSS قالب یا بخش CSS سفارشی المنتور قرار دهید تا به‌راحتی روی سایت شما اعمال شود.

💡 حالا وقتی کاربر یک تصویر را در لایت‌باکس باز می‌کند، دیگر امکان اسکرول صفحه وجود ندارد و تجربه کاربری بهتری خواهد داشت! 🚀