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

Bramus
Free Debreuil
Free Debreuil
LinkedIn

Published: Sep 4, 2026

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

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

تتوفّر الميزة لاختبار المطوّرين في Chrome 153 على قنوات الإصدار التجريبي وقناة مطوّري البرامج و"إصدار Canary" release channels. ولست بحاجة إلى تفعيل أي علامة.

المشكلة في ضبط السمة overflow على محور واحد

بدون هذه الميزة، كان من المستحيل إنشاء حاوية تمرير أحادي المحور باستخدام 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;
}

إذا جرّبت ذلك، ستلاحظ أنّه لا يعمل. يرجع ذلك إلى مشكلة overflow الموضّحة سابقًا: يصبح عنصر .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 إلا كحاوية تمرير للمحور x. سيتجاهل الصف العلوي الثابت الآن هذه الحاوية ويلتصق بشكلٍ صحيح بأداة تمرير المستند على المحور y، بينما يستمر العمود الأول في الالتصاق بعنصر .table-wrapper أفقيًا.

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

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

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

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

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

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