الربح من Clickworker في 2026

 ما هي خاصية overflow؟

تُستخدم خاصية overflow لتحديد كيف يتعامل المتصفح مع المحتوى الذي يتجاوز حجم العنصر.

---

القيم الأساسية لـ overflow:

القيمة	الوصف
visible	(الافتراضية) يظهر المحتوى الزائد خارج العنصر
hidden	يخفي المحتوى الزائد، ولا يظهر أي شريط تمرير
scroll	يُظهر دائمًا شريط تمرير (أفقي أو عمودي)، حتى لو لم يكن هناك حاجة
auto	يُظهر شريط تمرير فقط عند الحاجة (عند وجود محتوى زائد)

---

مثال عملي على كل قيمة:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 100px;
      border: 2px solid #333;
      margin-bottom: 20px;
      padding: 10px;
    }

    .visible {
      overflow: visible;
    }

    .hidden {
      overflow: hidden;
    }

    .scroll {
      overflow: scroll;
    }

    .auto {
      overflow: auto;
    }
  </style>
</head>
<body>

  <div class="box visible">
    <strong>overflow: visible</strong><br>
    هذا النص طويل جدًا وسيخرج من حدود الصندوق ولن يُخفى.
  </div>

  <div class="box hidden">
    <strong>overflow: hidden</strong><br>
    هذا النص طويل جدًا وسيتم إخفاء أي جزء يخرج من حدود الصندوق.
  </div>

  <div class="box scroll">
    <strong>overflow: scroll</strong><br>
    هذا النص طويل جدًا وسيتم إظهار شريط تمرير دائمًا.
  </div>

  <div class="box auto">
    <strong>overflow: auto</strong><br>
    هذا النص طويل جدًا وسيظهر شريط تمرير فقط عند الحاجة.
  </div>

</body>
</html>

---

خاصية overflow-x و overflow-y

• overflow-x: تتحكم في التمرير الأفقي فقط.
• overflow-y: تتحكم في التمرير العمودي فقط.

.box {
  overflow-x: hidden;
  overflow-y: auto;
}

---

استخدام شائع مع الصور أو النصوص الطويلة:

<div style="width:300px; height:150px; overflow:auto;">
  <img src="image.jpg" style="width:500px;">
</div>

---

حالات مفيدة:

• إخفاء الشريط الجانبي عند تصميم واجهة بسيطة (overflow: hidden)
• جعل مساحة التعليقات قابلة للتمرير (overflow: auto)
• تصميم واجهة دردشة أو محتوى يتم تحميله تدريجيًا مع شريط تمرير (overflow-y: scroll)

---

الواجب العملي:

1. جرّب إنشاء صندوق يحتوي على نص طويل وجرّب تغيير overflow بين القيم الأربع.
2. استخدم overflow-x و overflow-y لتتحكم في التمرير بشكل منفصل.
3. أنشئ div فيه صورة أعرض من الصندوق، وجرّب التحكم بظهورها باستخدام overflow.

تعديل المقال