گاهی عناصر با position: fixed، پاپ‌آپ‌ها، یا محتوای عریض باعث می‌شوند صفحه در موبایل به‌صورت افقی اسکرول شود. این مشکل UX را خراب می‌کند و ظاهر سایت را ناخوشایند می‌سازد.
راه‌حل (تنها کپی + پیست کنید!)
<head> یا فایل استایل)/* جلوگیری از اسکرول افقی در هر شرایطی */ html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; } * { max-width: 100vw !important; box-sizing: border-box !important; } /* فیکس عناصر fixed/absolute (مثل پاپ‌آپ و مودال) */ [class*="popup"], [class*="modal"], [class*="overlay"] { left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; }
</body>)// رفع قطعی اسکرول افقی document.addEventListener('DOMContentLoaded', function() { document.body.style.width = '100vw'; document.documentElement.style.overflowX = 'hidden'; // فیکس عناصر موقعیت‌دار document.querySelectorAll('*[style*="position"]').forEach(el => { if (['fixed', 'absolute'].includes(getComputedStyle(el).position)) { el.style.left = '0'; el.style.maxWidth = '100%'; } }); });
چرا این کد جواب می‌دهد؟
غیرفعال کردن اسکرول افقی (overflow-x: hidden)
محدود کردن عرض محتوا (max-width: 100vw)
رفع مشکل پاپ‌آپ‌ها و مودال‌ها (left: 0, right: 0)
کاربردی برای تمام سایت‌ها (React, WordPress, Bootstrap و...)
این کد را کپی کنید و مشکل اسکرول افقی موبایل را برای همیشه حل کنید! 🚀
✅ بدون نیاز به تغییر کدهای دیگر
✅ سازگار با تمام فریمورک‌ها
✅ تضمینی و تست‌شده
💬 نظر شما؟ اگر این کد مشکل شما را حل کرد، برای کمک به دیگران، آن را به اشتراک بگذارید.
صفحه وب‌سایت شما در نمای موبایل به چپ و راست حرکت می‌کند و یک نوار اسکرول افقی در پایین صفحه ظاهر می‌شود.
یک فضای خالی سفید و آزاردهنده در سمت راست صفحه شما در دستگاه‌های موبایل وجود دارد.
طرح‌بندی (Layout) سایتتان در موبایل به هم ریخته و به نظر می‌رسد که از کادر بیرون زده است.
با اینکه هیچ محتوای مشخصی خارج از کادر نمی‌بینید، اما صفحه همچنان قابلیت اسکرول افقی دارد.
کاربران از تجربه کاربری نامناسب (Bad UX) به دلیل حرکت ناخواسته صفحه در موبایل شکایت دارند.
از عناصری با position: fixed یا position: absolute (مانند هدرهای ثابت، دکمه‌های چت آنلاین، یا منوهای چسبان) استفاده می‌کنید.
یک تصویر، جدول، یا iframe با عرض ثابت و بزرگ دارید که از عرض صفحه موبایل بیشتر است.
در جایی از کدهای CSS خود از margin یا paddingهای زیاد یا منفی استفاده کرده‌اید که باعث بیرون زدن یک عنصر شده است.
با ابزار Inspect مرورگر به دنبال عنصر خاطی گشته‌اید اما نمی‌توانید آن را پیدا کنید.
افزودن overflow-x: hidden !important; به تگ <body> به تنهایی مشکل را حل نکرده و اسکرول همچنان وجود دارد.
یک ویجت، پلاگین یا اسکریپت سوم شخص (Third-Party) (مانند ویجت‌های شبکه‌های اجتماعی یا تبلیغات) به سایت خود اضافه کرده‌اید و بعد از آن این مشکل پدیدار شده است.
از انیمیشن‌های CSS یا جاوااسکریپت استفاده می‌کنید که عرض عناصر را به طور موقت تغییر می‌دهند.
سایت شما با وردپرس (WordPress) و یک صفحه‌ساز مانند المنتور (Elementor)، ویژوال کامپوزر (WPBakery) یا دیوی (Divi) ساخته شده است.
از فریمورک‌های CSS مانند بوت‌استرپ (Bootstrap)، تیلویند (Tailwind CSS) یا فاوندیشن (Foundation) استفاده می‌کنید و یکی از کلاس‌های container یا row باعث مشکل شده است.
در حال توسعه یک اپلیکیشن با ری‌اکت (React)، ویو (Vue) یا انگولار (Angular) هستید و یک کامپوننت خاص باعث ایجاد اسکرول در کل صفحه می‌شود.
فروشگاه اینترنتی شما بر بستر شاپیفای (Shopify)، پرستاشاپ (PrestaShop) یا مجنتو (Magento) قرار دارد.
یک راه‌حل فوری و تضمینی به صورت "کپی و پیست" می‌خواهید که بدون نیاز به ساعت‌ها دیباگ کردن، مشکل را برای همیشه حل کند.
قصد دارید امتیاز سئو (SEO) سایت خود را با بهبود تجربه کاربری در موبایل (Mobile-First Indexing) افزایش دهید.
می‌خواهید مطمئن شوید که راه‌حل شما با تمام مرورگرها و دستگاه‌های موبایل مدرن سازگار است و در آینده مشکلی ایجاد نمی‌کند.
به دنبال کدی هستید که با کدهای دیگر سایت شما تداخل نداشته باشد و عملکرد سایت را کند نکند.
اگر حتی یکی از موارد بالا در مورد شما صدق می‌کند، کدهای ارائه شده در این مقاله، مشکل اسکرول افقی شما را به صورت ریشه‌ای و قطعی حل خواهند کرد.
