●● دلایل ایجاد overflow در صفحات html ●●

🔸 احتمالا برای شما هم پیش اومده که در حال کار بر روی یک صفحه وب هستید و ناگهان متوجه اسکرول افقی در صفحه میشوید، توی این مطلب دلایل بروز این مشکل رو بررسی میکنیم

1️⃣ استفاده از واحدهای ثابت مانند px برای عرض

اگر از واحدهای ثابت مثل px برای عرض یک عنصر استفاده کنید و این عرض بیشتر از اندازه ویوپورت باشد، اسکرول ایجاد می‌شود.

راه حل ها :

● ریسپانسیو کردن المنت ها و جلوگیری از بروز این مشکل در سایز های کوچک تر.

● استفاده از واحدهای نسبی مثل % یا vw این.

.element {
  width: 100vw;
}

2️⃣ عدم تنظیم صحیح box-sizing

به صورت پیش‌فرض، ویژگی padding و border به عرض یک عنصر اضافه می‌شوند، که ممکن است باعث شود عرض کلی عنصر از مقدار مورد انتظار بیشتر شود و اسکرول ایجاد کند و راه حل برطرف کردنش استفاده از box-sizing: border-box هستش.

راه حل :

* { box-sizing: border-box; }

استفاده از box-sizing: border-box باعث می‌شود padding و border داخل عرض اصلی محاسبه شوند.

3️⃣ استفاده از position: absolute یا position: fixed

اگر عنصری با استفاده از position: absolute یا position: fixed از ویوپورت خارج شود، می‌تواند اسکرول افقی ایجاد کند.

مثال :

.out-of-bounds { position: absolute; left: 2000px; } 

4️⃣ عدم مدیریت صحیح کلمات بلند یا لینک‌ها

متن‌ها یا لینک‌های بسیار بلند که در یک خط قرار می‌گیرند (مانند لینک‌های طولانی یا کلمات بدون فاصله) می‌توانند عرض صفحه را بشکنند و اسکرول افقی ایجاد کنند.

راه حل :

استفاده ویژگی‌های word-break و overflow-wrap باعث میشه تا مرورگر در صورت برخورد با کلمات بلند، اونها رو به صورت خودکار شکسته و در خطوط جدید قرار دهد.

.long-text {
  word-break: break-all;
  overflow-wrap: break-word;
}

✅ راه‌حل جامع

برای جلوگیری از اسکرول افقی در کل صفحه می‌تونید از ویژگی overflow-x: hidden استفاده کنید، اگر نیازی به اسکرول افقی ندارید.

نحوه استفاده :

body { overflow-x: hidden; }

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

💎 توی این مطلب سعی کردم تمامی مواردی که میتونن باعث اسکرول افقی در صفحه بشن رو بهتون توضیح بدم

اگر براتون کاربردی و مفید بود حمایت یادتون نره، برای رفقاتونم بفرستید تا استفاده کنن 🔥❤️

#️⃣ #overflow #css #webpage

🚀 @coolycode