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

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

Bramus

مقدمة

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

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

Browser Support

• 121
• 121
• 64
• 26.2

Source

Scrollbars 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-* عند التمرير فقط