ما هي خاصية 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)
الواجب العملي:
- جرّب إنشاء صندوق يحتوي على نص طويل وجرّب تغيير
overflowبين القيم الأربع. - استخدم
overflow-xوoverflow-yلتتحكم في التمرير بشكل منفصل. - أنشئ div فيه صورة أعرض من الصندوق، وجرّب التحكم بظهورها باستخدام
overflow.