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

استخدِم السمتَين scrollbar-width وscrollbar-color لتنسيق أشرطة التمرير.

مقدمة

بدءًا من الإصدار الثاني من Chrome، أتحنا تصميمًا لأشرطة التمرير باستخدام العناصر الزائفة البالغ عددها ::-webkit-scrollbar-*. تعمل هذه الطريقة بشكل جيد في Chrome وSafari، إلا أنّها لم توحِّدها أبدًا من قِبل CSS Working Group.

أما السمات الموحّدة، فهي scrollbar-width وscrollbar-color، وهي جزء من مواصفات المستوى 1 من وحدة نمط أشرطة التمرير في CSS. تصبح هذه السمات متاحة بدءًا من الإصدار 121 من Chrome.

دعم المتصفح

  • Chrome: 121.
  • الحافة: 121.
  • Firefox: 64.
  • Safari: غير متاح.

المصدر

أشرطة التمرير 101

بنية شريط التمرير

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

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

رسم توضيحي للأجزاء التي يتكوّن منها شريط التمرير
صورة توضيحية للأجزاء التي يتألف منها شريط تمرير الرسم التوضيحي على اليسار هو شريط تمرير بسيط يضم مسارًا وإبهامًا فقط. يحتوي الزر على اليسار أيضًا على أزرار.

أشرطة تمرير كلاسيكية وتراكب

قبل النظر في كيفية تصميم أشرطة التمرير، من المهم فهم الفرق بين نوعين من شريط التمرير.

أشرطة التمرير المركّبة

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

صورة توضيحية لمتصفّح مع شريط تمرير يظهر على سطح الفيديو
صورة توضيحية لمتصفّح مع شريط تمرير يظهر على سطح الفيديو يتراكب شريط التمرير على المحتوى؛ والإبهام شفاف جزئيًا.

أشرطة التمرير الكلاسيكية

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

صورة توضيحية لمتصفّح يتضمن شريط تمرير كلاسيكيًا
صورة توضيحية لمتصفّح يتضمن شريط تمرير كلاسيكيًا يتم وضع شريط التمرير بجوار المحتوى في المنطقة المخصصة له؛ ويتم تقليص العرض المتاح للمحتوى مقارنةً بالعرض المتاح عند استخدام أشرطة التمرير المركّبة.

السمتان scrollbar-color وscrollbar-width

إضافة ألوان لأشرطة التمرير باستخدام "scrollbar-color"

تتيح لك السمة scrollbar-color تغيير الألوان في أشرطة التمرير. تقبل السمة قيمتَين (<color>). تحدد قيمة <color> الأولى لون الإبهام وقيمة القيمة الثانية هي اللون المطلوب استخدامه للمقطع الصوتي.

.scroller {
  scrollbar-color: hotpink blue;
}

عند استخدام شريط تمرير متراكب، لا يكون لون المسار أي تأثير بشكل افتراضي. ومع ذلك، سيظهر المسار بعد التمرير فوق شريط التمرير.

العرض التوضيحي: تصميم أشرطة التمرير: scrollbar-color

لاستخدام العرض التلقائي الذي يوفّره نظام التشغيل، استخدِم auto كقيمتها.

تغيير حجم شريط التمرير باستخدام "scrollbar-width"

تتيح لك السمة scrollbar-width اختيار شريط تمرير أصغر حجمًا أو حتى إخفاء شريط التمرير تمامًا بدون التأثير في إمكانية التمرير.

القيم المقبولة هي auto وthin وnone.

  • auto: العرض التلقائي لشريط التمرير كما هو موضّح في المنصة.
  • thin: نسخة رفيعة من شريط التمرير توفّره المنصة، أو شريط تمرير مخصّص أخف من شريط التمرير في المنصة التلقائية
  • none: يخفي شريط التمرير بشكل فعّال. على الرغم من ذلك، لا يزال العنصر قابلاً للتمرير.

لا يمكن استخدام <length> مثل 16px كقيمة لـ scrollbar-width.

.scroller {
  scrollbar-width: thin;
}

عند استخدام شريط تمرير متراكب، يتم رسم الإبهام فقط أثناء التمرير بشكل نشط في المنطقة القابلة للتمرير.

العرض التوضيحي: تصميم أشرطة التمرير: scrollbar-width

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

لتلبية إصدارات المتصفّح التي لا تتوافق مع scrollbar-color وscrollbar-width، من الممكن استخدام كل من السمتَين scrollbar-* و::-webkit-scrollbar-* الجديدتَين.

.scroller {
    --scrollbar-color-thumb: hotpink;
    --scrollbar-color-track: blue;
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    .scroller {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    .scroller::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    .scroller::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    .scroller::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}
عرض توضيحي: تصميم أشرطة التمرير باستخدام scrollbar-* مع الرجوع إلى ::-webkit-scrollbar-*

عند ضبط width أو height من ::-webkit-scrollbar، يظهر دائمًا شريط تمرير متراكب، ما يؤدي إلى تحويله إلى شريط تمرير كلاسيكي.

وللحدّ من هذا الوهم، يمكنك اختيار تغيير الألوان فقط عند تمرير مؤشّر الماوس.

.scroller::-webkit-scrollbar-thumb {
    background: transparent;
}
.scroller::-webkit-scrollbar-track {
    background: transparent;
}
.scroller:hover::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color-thumb);
}
.scroller:hover::-webkit-scrollbar-track {
    background: var(--scrollbar-color-track);
}

.scroller:hover {
    --fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}
العرض التوضيحي: تصميم أشرطة التمرير باستخدام scrollbar-* مع خيار احتياطي إلى ::-webkit-scrollbar-*، مع تطبيق ألوان ::-webkit-scrollbar-* فقط عند التمرير