القائمة الكاملة

The CSS Podcast - 034: Overflow

عندما يتجاوز المحتوى العنصر الرئيسي، تتوفّر العديد من الخيارات لكيفية التعامل معه. يمكنك الانتقال لأسفل الصفحة لإضافة مساحة إضافية، واقتصاص الحواف الزائدة، والإشارة إلى الجزء المقطوع بعلامة حذف، وغير ذلك الكثير. من المهم بشكل خاص مراعاة تجاوز الحد الأقصى عند تطوير تطبيقات الهواتف وأحجام الشاشات المتعددة.

يتوفّر خياران مختلفان للقص في CSS، إذ ستساعد text-overflow في قص أسطر النص الفردية، وستساعد خصائص overflow في التحكّم في المحتوى الزائد في نموذج المربّع.

تجاوز سعة السطر الواحد باستخدام text-overflow

استخدِم السمة text-overflow في أي عنصر يحتوي على عُقد نصية، مثل فقرة <p>. تحدّد هذه السمة طريقة ظهور النص عندما لا يتّسع في المساحة المتاحة للعنصر. يظهر كل نص HTML يمكن عرضه على صفحة في عُقد نصية. لاستخدام text-overflow، تحتاج إلى سطر نصي واحد غير ملفوف، لذا يجب أيضًا ضبط overflow على hidden وتوفير قيمة white-space تمنع الالتفاف.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

استخدام خصائص الفائض

يتم ضبط سمات الفائض على عنصر للتحكّم في ما يحدث عندما تحتاج العناصر الفرعية إلى مساحة أكبر من المساحة المتوفّرة. يمكن أن يكون ذلك مقصودًا، كما هو الحال في خريطة تفاعلية مثل "خرائط Google"، حيث ينقل المستخدم صورة كبيرة تم اقتصاصها إلى حجم معيّن. يمكن أن يكون ذلك أيضًا غير مقصود، كما هو الحال في تطبيق محادثة يكتب فيه المستخدم رسالة طويلة لا تتسع في فقاعة النص.

يمكن تقسيم الفائض إلى جزأين. يحتوي العنصر الرئيسي على مساحة محدودة وثابتة لن تتغيّر. يمكنك التفكير في هذا على أنّه نافذة. العناصر الفرعية هي محتوى يحتاج إلى مساحة أكبر من العنصر الرئيسي. يمكنك التفكير في ذلك على أنّه ما تراه من خلال النافذة. ستساعد إدارة المحتوى الزائد في تحديد كيفية عرض إطارات النافذة لهذا المحتوى.

التمرير على المحورين العمودي والأفقي

تتحكّم السمة overflow-y في تجاوز المحتوى للحدود المادية على طول المحور العمودي لإطار عرض الجهاز، وبالتالي يمكن التمرير للأعلى والأسفل.

تتحكّم السمة overflow-x في تجاوز المحتوى على طول المحور الأفقي لمنطقة عرض الجهاز، وبالتالي يمكن التمرير سريعًا لليمين واليسار.

الخصائص المنطقية لاتجاه التمرير

تضبط السمتان overflow-inline وoverflow-block سلوك تجاوز السعة استنادًا إلى اتجاه المستند وطريقة الكتابة.

الاختصار overflow

يضبط الاختصار overflow كلاً من النمطين overflow-x وoverflow-y في سطر واحد:

overflow: hidden scroll;

في حال تحديد كلمتَين رئيسيتَين، تنطبق الكلمة الأولى على overflow-x والثانية على overflow-y. بخلاف ذلك، تستخدم كلتا السمتَين overflow-x وoverflow-y القيمة نفسها.

القيم

ألقِ نظرة فاحصة على القيم والكلمات الرئيسية المتاحة لسمات overflow.

overflow: visible (تلقائي)

بدون ضبط السمة، تكون القيمة التلقائية على الويب هي overflow: visible. يضمن ذلك عدم إخفاء المحتوى عن غير قصد، كما يلتزم بالمبادئ الأساسية "عدم إخفاء المحتوى مطلقًا" أو "التنسيقات الآمنة للتنسيقات الدقيقة".

overflow: hidden

يتم قص المحتوى باستخدام overflow: hidden في الاتجاه المحدّد، ولا يتم توفير أشرطة تمرير لعرضه.

overflow: scroll

تتيح

overflow: scroll أشرطة التمرير للسماح للمستخدمين بالتمرير خلال المحتوى. حتى إذا لم يكن المحتوى يفيض، ستظهر أشرطة التمرير. هذه طريقة رائعة لتقليل تغييرات التنسيق المستقبلية إذا كان من المحتمل أن يكون الحاوية قابلة للتمرير في المستقبل استنادًا إلى تغيير الحجم مثلاً، ولإعداد المستخدم بصريًا للمساحات القابلة للتمرير.

overflow: clip

كما هو الحال مع

Like overflow: hidden، يتم قص المحتوى الذي يتضمّن overflow: clip إلى مربّع المساحة المتروكة للعنصر. الفرق بين clip وhidden هو أنّ الكلمة الرئيسية clip تحظر أيضًا كل التمرير، بما في ذلك التمرير الآلي.

overflow: auto

أخيرًا، القيمة الأكثر استخدامًا، overflow: auto يأخذ هذا الإعداد في الاعتبار الإعدادات المفضّلة للمستخدم ويعرض أشرطة التمرير عند الحاجة، ولكنّه يخفيها تلقائيًا، ويترك للمستخدم والمتصفّح مسؤولية التمرير.

التمرير والفيضان

تؤدي العديد من سلوكيات overflow إلى ظهور شريط تمرير، ولكن هناك بعض سلوكيات التمرير وخصائصه المحددة التي يمكن أن تساعدك في التحكّم في التمرير في الحاوية التي تتضمّن محتوًى فائضًا.

التمرير وإمكانية الوصول

من المهم التأكّد من أنّ المساحة القابلة للتمرير يمكنها قبول التركيز، حتى يتمكّن مستخدم لوحة المفاتيح من الانتقال إلى المربّع باستخدام مفتاح التبويب، ثم استخدام مفاتيح الأسهم للتمرير.

للسماح لمربّع قابل للتمرير بقبول التركيز، أضِف tabindex="0"، وهو اسم يتضمّن السمة aria-labelledby، والسمة role المناسبة. على سبيل المثال:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

يمكن بعد ذلك استخدام CSS للإشارة إلى أنّ المربّع في وضع التركيز، وذلك باستخدام السمة outline لتقديم إشارة مرئية إلى أنّه يمكن الآن الانتقال إلى أعلى أو أسفل المربّع.

في Using CSS to Enforce Accessibility، يوضّح Adrian Roselli كيف يمكن أن يساعد CSS في منع تراجع إمكانية الوصول. على سبيل المثال، لتفعيل التمرير وإضافة مؤشر التركيز فقط في حال استخدام السمات الصحيحة. لن تجعل القواعد التالية المربّع قابلاً للتمرير إلا إذا كان يتضمّن السمات tabindex وaria-labelledby وrole.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

موضع شريط التمرير ضمن نموذج المربّع

تستهلك أشرطة التمرير مساحة داخل مربّع المساحة المتروكة ويمكن أن تتنافس على المساحة إذا كان inline وليس overlaid. يتناول وحدة نموذج المربّع هذا المصدر المحتمل لانتقال التنسيق بمزيد من التفصيل.

محتوى قابل للتمرير على مستوى المستند مقابل محتوى قابل للتمرير ضمنيًا

قد تلاحظ أنّ بعض أدوات التمرير تتضمّن سلوك السحب لإعادة التحميل وسلوكيات خاصة أخرى، لا سيما عند تطوير تطبيقات الأجهزة الجوّالة والتطبيقات الهجينة. يحدث سلوك التمرير هذا على أداة التمرير الرئيسية. لا يمكن أن يكون هناك سوى أداة تمرير واحدة في الصفحة. بشكلٍ تلقائي، يكون documentElement هو أداة التمرير الرئيسية في الصفحة، ولكن من خلال تغيير العنصر الذي يمثّل أداة التمرير الرئيسية، يمكن تطبيق السلوكيات الخاصة على أدوات التمرير الأخرى غير documentElement، ونطلق على أداة التمرير الجديدة هذه اسم أداة التمرير الرئيسية الضمنية.

لإنشاء أداة تمرير رئيسية، يمكنك استخدام ميزة تُعرف باسم الترويج لأداة التمرير من خلال وضع حاوية في موضع ثابت، ما يضمن تغطيتها لكامل مساحة العرض وأنّها في أعلى ترتيب z مع أداة تمرير. يمكنك تجربة أداة تمرير رئيسية مقابل أداة تمرير ضمنية مدمجة هنا.

تنسيق شريط التمرير

يمكنك تصميم شريط التمرير لدمجه في تصميم موقعك الإلكتروني. تضبط scrollbar-color لون شريط التمرير ومساره.

لتغيير عرض شريط التمرير، استخدِم scrollbar-width. لا يمكنك ضبط هذا الخيار على طول عشوائي، ولكن يمكنك تحديد ما إذا كنت تريد thin شريط تمرير أو none.

scroll-behavior

يتيح لك scroll-behavior تفعيل التمرير الذي يتحكّم فيه المتصفّح إلى العناصر. يتيح لك ذلك تحديد كيفية التعامل مع التنقّل داخل الصفحة، مثل .scrollTo() أو الروابط.

ويكون هذا مفيدًا بشكل خاص عند استخدامه مع prefers-reduced-motion لتحديد سلوك التمرير استنادًا إلى إعدادات المستخدم المفضّلة.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

إذا سبق لك الوصول إلى نهاية تراكب مشروط، ثم واصلت التمرير وتحرّكت الصفحة خلف التراكب، يكون هذا هو ربط التمرير أو الانتقال إلى حاوية التمرير الرئيسية. تتيح لك السمة overscroll-behavior منع تسرب التمرير الزائد إلى حاوية رئيسية (يُعرف ذلك باسم ربط التمرير).

محاذاة مواضع التمرير

يكون التمرير سلسًا بشكل عام، ما يتيح لك وضع المحتوى في أي مكان تريده ضمن منطقة التمرير. بالنسبة إلى بعض التصاميم، مثل معارض الصور أو المحتوى الذي يحاكي الصفحات أو الشرائح، قد تحتاج إلى ضبط المحتوى ليتم عرضه بالكامل في إطار العرض.

إعداد حاوية التمرير

لتفعيل ميزة "المحاذاة عند التمرير"، أضِف scroll-snap-type إلى حاوية التمرير. عليك أولاً تحديد المحور الذي سيحدث عليه محاذاة التمرير السريع. يمكن أن يكون هذا الموقع موقعًا منطقيًا (block أو inline) أو موقعًا جغرافيًا (x أو y) أو both.

يمكنك أيضًا تحديد مدى دقة محاذاة التمرير. مستوى الدقة التلقائي هو proximity، ما يعني أنّ حاوية التمرير ستحاول التثبيت إذا أمكن ذلك. يمكنك أيضًا ضبط مستوى الدقة على mandatory للتأكّد من أنّ حاوية التمرير سيتم محاذاتها دائمًا.

.scroll-container {
    scroll-snap-type: block mandatory;
}

تعمل ميزة "محاذاة التمرير السريع" على محاذاة عنصر ضمن الحدود الكاملة لحاوية التمرير، ولكن ماذا يحدث إذا لم يكن جزء من حاوية التمرير مرئيًا؟ على سبيل المثال، قد يكون لديك عنوان ثابت يغطي جزءًا من حاوية التمرير. للمساعدة في محاذاة العناصر التي تم التقاطها مع الجزء المرئي من حاوية التمرير، يمكنك ضبط scroll-padding.

التحكّم في العناصر القابلة للمحاذاة

لجعل عنصر قابلاً للمحاذاة، اضبط السمة scroll-snap-align على start أو end أو center. إذا كانت قيمة اتجاه محاذاة التمرير السريع both، يمكنك ضبط قيمتَين. تحدّد هذه السمة ما إذا كانت حافة العنصر ستتطابق مع حافة منفذ التمرير أو سيتم توسيطها.

يمكنك ضبط المسافة حول حواف العنصر المحاذي باستخدام scroll-margin:

يتم استخدام scroll-margin أيضًا لضبط المساحة المتروكة عند الانتقال إلى عنصر:

لجعل التمرير أكثر ثباتًا، يمكنك إضافة scroll-snap-stop: always إلى عنصر في حاوية تمرير. ولا يمنعك من الانتقال إلى عناصر متعددة في عملية تمرير واحدة. إذا أنهيت حركة التمرير بطريقة تستمر فيها عملية التمرير بالقصور الذاتي، ستنتهي عملية التمرير عند موضع المحاذاة التالي بدلاً من الاستمرار بعده.

التحقّق من فهمك

الموارد

Overflow And Data Loss In CSS from Smashing Magazine