جاهز للاختبار من قِبل المطوّرين: حاويات التمرير على محور واحد

Bramus
Free Debreuil
Free Debreuil
LinkedIn

تاريخ النشر: 4 سبتمبر 2026

توسّع ميزة "حاويات التمرير على محور واحد" نطاق استخدام خاصية CSS overflow لتتيح القيم القابلة للتمرير (auto وscroll وhidden) مع clip (مثل overflow: scroll clip)، ما يؤدي إلى إنشاء حاويات تمرير لمحور واحد فقط.

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

تتوفّر الميزة لاختبار المطوّرين في الإصدار 154 من Chrome على قنوات الإصدار التجريبية وقناة المطوّرين وقناة إصدار Canary. ليس عليك تفعيل أي علامة.

المشكلة المتعلقة بضبط تجاوز المحتوى على أحد المحاور

بدون هذه الميزة، كان من المستحيل إنشاء حاوية تمرير أحادي المحور باستخدام CSS. إذا أعددت أحد المحورَين للتمرير أثناء محاولة إبقاء المحور الآخر مرئيًا (على سبيل المثال، ضبط overflow-x: scroll وترك overflow-y: visible)، سيفرض محرّك الأنماط في المتصفّح تلقائيًا على المحور المرئي أن يتم احتسابه على أنّه auto (أو scroll). يؤدي ذلك إلى إنشاء محتوى قابل للتمرير ثنائي الأبعاد حتى إذا لم يكن هذا هو هدفك.

يصبح هذا السلوك واضحًا جدًا عند محاولة إنشاء جدول يتضمّن صفًا علويًا ثابتًا وعمودًا أول ثابتًا. في المثال التالي، الهدف هو أن يلتصق العمود الأول بعنصر .table-wrapper الذي يتم تمريره أفقيًا، وأن يلتصق الصف العلوي بعنصر التمرير في المستند.

<div class="table-wrapper" style="overflow-x: auto;">
  <table>
    …
  </table>
</div>

/* Scroll horizontally */
.table-wrapper {
  overflow-x: auto;
}

/* Sticky top row */
.table-wrapper thead {
  position: sticky;
  top: 0;
}

/* Sticky first column */
.table-wrapper td:first-child {
  position: sticky;
  left: 0;
}

إذا جرّبت ذلك، ستلاحظ أنّه لا يعمل. ويرجع ذلك إلى مشكلة تجاوز السعة الموضّحة سابقًا: يصبح .table-wrapper في الواقع أداة تمرير ثنائية الأبعاد. لذلك، عندما يبحث position: sticky عن أقرب عنصر تمرير للأعلى أو للأسفل لكل محور، تكون النتيجة هي العنصر .table-wrapper في كلتا الحالتين.

عرض توضيحي مباشر

تسجيل العرض التوضيحي

إصلاح المشكلة في حاويات التمرير على محور واحد

باستخدام حاويات التمرير أحادية المحور، يمكنك منع المحور الثانوي بشكل صريح من أن يصبح أداة تمرير باستخدام clip. بهذه الطريقة، يمكن لـ position: sticky تتبُّع حاويتَين مختلفتَين للتمرير بشكل مستقل.

لإصلاح مثال الجدول، اربط التمرير الأفقي باستخدام overflow-y: clip.

.table-wrapper {
  overflow-x: auto;
  overflow-y: clip;
}

أو باستخدام الاختصار overflow:

.table-wrapper {
  overflow: auto clip;
}

من خلال إجراء ذلك، تعمل .table-wrapper كحاوية تمرير على المحور الأفقي فقط. سيتجاوز الصف العلوي الثابت الآن هذا الإعداد وسيتم تثبيته بشكل صحيح على أداة التمرير في المستند على المحور y، بينما سيستمر العمود الأول في التثبيت على .table-wrapper أفقيًا.

إذا كنت تتصفّح هذه المشاركة في متصفّح متوافق، يمكنك الاطّلاع على هذه الميزة في العرض التوضيحي التالي:

عرض توضيحي مباشر

تسجيل العرض التوضيحي

السلوكيات المتأثّرة

بما أنّ حاويات التمرير أحادية المحور تغيّر طريقة تقييم سياقات التمرير وإنشائها، قد تلاحظ تغييرات في الميزات الأخرى التي تعتمد على حاويات التمرير، مثل:

  • position: sticky: كما هو موضّح، ستلتصق العناصر الآن بشكل صحيح داخل حاويات التمرير على محور واحد، ما يحسّن سلوك العناصر التي يحدّها overflow: clip على أحد المحاور.
  • overscroll-behavior: بما أنّ العنصر يمكن أن يكون الآن حاوية قابلة للتمرير على محور واحد فقط، قد لا يتم تشغيل overscroll-behavior على المحور الذي تم اقتصاصه، ما قد يؤثر في تأثيرات التمرير السريع المخصّصة أو الارتداد. يتوافق هذا التغيير في السلوك مع Firefox وSafari.
  • التمرير الآلي: عند استدعاء واجهات برمجة تطبيقات التمرير (مثل Element.scrollTo()) في حاوية تمرير أحادية المحور، يتم الآن فرض قيود التمرير الآلي. سيرفض العنصر التنقّل آليًا على طول المحور المحدّد على أنّه قص.
  • الحد الأدنى لحجم الخلايا في الشبكة والتصميم المرن: بالنسبة إلى حاويات التمرير في الشبكة والتصميم المرن، يتم عادةً تجاهل الحد الأدنى التلقائي للحجم (min-width: auto) للسماح للخلايا بضبط حجمها حسب المساحة المتاحة. عند ضبط overflow: clip على المحور نفسه، سيبدأ الحد الأدنى التلقائي للحجم في التأثير، ما قد يؤدي إلى زيادة حجم حاوية العناصر المرنة أو الشبكية.

رصد الميزات

لرصد إمكانية استخدام حاويات التمرير أحادية المحور، يمكنك طلب البحث عن القاعدة @supports named-feature() باستخدام الكلمة الرئيسية single-axis-scroll-container.

@supports named-feature(single-axis-scroll-container) {
  /* Feature is supported */
}

كما هو موضّح في المشكلة رقم ‎13677 في مجموعة عمل CSS، يُعدّ استخدام named-feature(single-axis-scroll-container) الطريقة المعيارية المقترَحة لرصد هذه الإمكانية، لأنّ التحقّق باستخدام @supports (overflow: scroll clip) وحده هو تحقّق من التحليل فقط، ولا يرصد ما إذا كان المتصفّح يتعامل مع سلوكيات التمرير المعدَّلة على محور واحد بشكل صحيح أم لا.

في JavaScript، استخدِم CSS.supports("named-feature(single-axis-scroll-container)") لإجراء عملية التحقّق هذه.

ملاحظاتك تهمّنا

لتقييم المخاطر المحتملة المتعلّقة بالتوافق، تم إجراء اختبارات على 190 موقعًا إلكترونيًا. واستنادًا إلى هذا التحليل، لا يبدو أنّ التغييرات ستؤدي إلى حدوث أي أعطال كبيرة.

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

إذا بدأت المشاكل بالظهور لك أو واجهت سلوكًا غير متوقّع أثناء التمرير، يُرجى تسجيل خطأ في Chromium.