overflow: hidden وscroll وauto وclip
تحكّم في معالجة المحتوى الفائض باستخدام القيم hidden وscroll وauto وclip
overflow: hidden وscroll وauto وclip درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
خلاصة الخاصية overflow
تتحكم overflow فيما يحدث عندما يتجاوز محتوى العنصر أبعاده المحددة. وتنطبق على المحورين معًا (أو استخدم overflow-x/overflow-y للتحكم في كل محور على حدة).
overflow: visible
تعمل visible (القيمة الافتراضية) على عرض المحتوى خارج الصندوق. ولا تنشئ سياق تنسيق الكتل (BFC). ويمكن للعناصر الأخرى التداخل مع المحتوى المتجاوز.
overflow: hidden
تقص hidden المحتوى عند حدود الصندوق. وتنشئ سياق تنسيق كتل (BFC)، ما يؤدي إلى احتواء العناصر العائمة ومنع انهيار الهوامش. وهي القيمة الأكثر شيوعًا لحاويات الصور ذات الزوايا المستديرة.
<div class="rounded-card"></div>overflow: scroll
تُظهر scroll أشرطة التمرير دائمًا (على المحاور التي تدعمها)، بغض النظر عما إذا كان المحتوى يتجاوز الحدود. وهي مفيدة لإنشاء واجهة مستخدم متسقة تكون فيها مساحة شريط التمرير موجودة دائمًا لمنع تغيّر التخطيط.
<div class="console">line 1<br>line 2<br>line 3<br>line 4<br>line 5<br>line 6<br>line 7<br>line 8<br>line 9<br>line 10<br>line 11<br>line 12</div>overflow: auto
تُظهر auto أشرطة التمرير فقط عندما يتجاوز المحتوى الحدود فعليًا. وهي المفضلة لمعظم الحاويات القابلة للتمرير، لأنها تتجنب عرض أشرطة تمرير غير ضرورية.
<div class="sidebar">Sidebar content line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5</div>overflow: clip
تقص clip المحتوى مثل hidden، لكنها لا تنشئ سياق تنسيق كتل (BFC). وهذا يعني أنها لا تؤثر في احتواء العناصر العائمة أو انهيار الهوامش. استخدمها عندما تريد قص المحتوى دون الآثار الجانبية لـ BFC.
<div class="decorative-overflow"><div class="deco"></div></div>overflow-x وoverflow-y
تحكّم في كل محور بشكل مستقل. ومن الأنماط الشائعة جدًا: التمرير الأفقي للمحتوى العريض (مثل الجداول والشفرة)، مع إبقاء التجاوز الرأسي مرئيًا:
<div class="table-wrapper">
<table>
<tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
</div>التجاوز وBFC
يؤدي ضبط overflow على أي قيمة غير visible وclip إلى إنشاء سياق تنسيق كتل. ويحتوي هذا السياق على العناصر العائمة الداخلية، ويمنع تسرّب انهيار الهوامش، وينشئ سياق تمرير جديدًا.
overflow: overlay (غير قياسي)
ترسم overflow: overlay شريط التمرير فوق المحتوى بدلًا من حجز مساحة له في التخطيط. وكانت هذه قيمة غير قياسية في بعض المتصفحات، ويجري إهمالها لمصلحة تنسيق أشرطة التمرير الحديث.
scrollbar-gutter
تحجز الخاصية الجديدة scrollbar-gutter: stable مساحة لشريط التمرير حتى عندما لا تكون هناك حاجة إليه، ما يمنع تغيّر التخطيط عند تحول المحتوى إلى محتوى قابل للتمرير.
<div class="container">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6<br>Line 7</div>التجاوز والعناصر الأبناء ذات الموضع الثابت
من الأخطاء الشائعة أن يتصرف عنصر ابن لديه position: fixed داخل عنصر لديه overflow: hidden مثل position: absolute — إذ يصبح الموضع الثابت نسبيًا إلى الكتلة الحاوية، كما ينشئ التجاوز سياق تكديس جديدًا.
تحقق سريع
ما قيمة overflow التي تقص المحتوى من دون إنشاء سياق تنسيق كتل؟
خلاصة
تسمح visible (القيمة الافتراضية) بالتجاوز. تقص hidden المحتوى وتنشئ BFC. تُظهر scroll أشرطة التمرير دائمًا. تُظهر auto أشرطة التمرير عند الحاجة فقط (وهي المفضلة). تقص clip المحتوى من دون BFC. استخدم overflow-x/y للتحكم في كل محور على حدة. استخدم scrollbar-gutter: stable لمنع تغيّر التخطيط.
الأسئلة الشائعة
هل درس «overflow: hidden وscroll وauto وclip» مجاني؟
نعم — نص درس «overflow: hidden وscroll وauto وclip» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «overflow: hidden وscroll وauto وclip»؟
تحكّم في معالجة المحتوى الفائض باستخدام القيم hidden وscroll وauto وclip تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «overflow: hidden وscroll وauto وclip»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- overflow: hidden وscroll وauto وclip
- scroll-behavior: smooth
- scroll-snap-type وscroll-snap-align
- تنسيق شريط التمرير باستخدام ::-webkit-scrollbar