تخصيص لون شريط التمرير أو سُمكه

يمكنك تخصيص مظهر أشرطة التمرير باستخدام السمتَين العاديتَين scrollbar-color وscrollbar-width في CSS.

• scrollbar-color: تقبل قيمتَين من النوع <color>. ينطبق الأول على شريط التمرير (الجزء المتحرك)، والثاني على المسار (الخلفية الثابتة).
• scrollbar-width: تقبل auto (تلقائي) أو thin (نسخة أرفع) أو none (تخفي شريط التمرير تمامًا مع الحفاظ على إمكانية التمرير).

تطبيق scrollbar-color وscrollbar-width

مطلوب: استخدِم scrollbar-color وscrollbar-width في الحاوية القابلة للتمرير.

عند استخدام scrollbar-color، استخدِم متغيّرات CSS لإبقاء ألوان شريط التمرير والمسار منفصلة، وذلك لسهولة القراءة والصيانة (خاصةً عند استخدام الخيارات الاحتياطية).

.scroller {
  --scrollbar-thumb: var(--color-neutral-70);
  --scrollbar-track: var(--color-neutral-90);

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

استراتيجيات احتياطية

الخيارات الاحتياطية وتوافق المتصفّح مع scrollbar-color

هذه الميزة هي تحسين تدريجي ولا تتطلب دائمًا إجراءات احتياطية.

إذا كان التنسيق مهمًا وكان هدف Baseline للمستخدم هو "Baseline Widely Available" أو إصدار أقدم، يجب تضمين العناصر الزائفة ::-webkit-scrollbar غير العادية كبدائل.

يمكنك تضمين العناصر الاحتياطية القديمة في مجموعة @supports not (scrollbar-color: auto) لمنع حدوث تعارضات بين السمات العادية ومحدّدات WebKit القديمة في المتصفحات التي تتيح كليهما بشكلٍ أصلي.

إذا كنت تستخدم خصائص مخصّصة لتحديد الألوان، سيتم تطبيقها تلقائيًا على محدّدات WebKit القديمة. وليس عليك تكرارها.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}