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

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

كما هو الحال 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 للإشارة إلى أنّه سيكون قابلاً للتمرير الآن.

في مقالة استخدام CSS لفرض تسهيل الاستخدام، يوضّح "أدريان روزيلي" كيف يمكن أن يساعد 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 في الأعلى مع شريط تمرير. يمكنك الاطّلاع على ميزة "أداة التمرير في الصفحة الرئيسية" مقارنةً بميزة "أداة التمرير الضمني المُدمَج" هنا.

scroll-behavior

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

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

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

overscroll-behavior

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

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

اختبِر معلوماتك حول المحتوى الزائد

الموارد

تجاوز التدفق وفقدان البيانات في CSS من Smashing Magazine