خاصية لون شريط التمرير
آخر تحديث: 2026-09-13
scrollbar-color خاصية لون شريط التمرير
تُخصص خاصية scrollbar-color لون شريط التمرير في المتصفح، بما في ذلك المقبض والمسار. وهي جزء من مواصفات CSS Scrollbars وتوفر طريقة بسيطة لمطابقة شريط التمرير مع لوحة ألوان الصفحة دون إضافات JavaScript.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | نعم |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
scrollbar-color: auto | dark | light | <color> <color>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | dark | light | كلمة مفتاحية | نظام ألوان مُعد مسبقًا |
<color> <color> | القيمة | ألوان المقبض والمسار |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| scrollbar-color | ✓ v79 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يدعم scrollbar-color حاليًا في المقام الأول متصفحات المعتمدة على Chromium وفايرفوكس؛ بينما يحتاج سفاري والمتصفحات القديمة إلى العنصر الزائف ::-webkit-scrollbar.
تلميح： يتوافق قيمتا اللون مع المقبض والمسار؛ فإذا أُعطيت قيمة واحدة فقط، يحسب المتصفح الأخرى تلقائيًا.
❓ الأسئلة الشائعة
Qما الفرق بين scrollbar-color و ::-webkit-scrollbar؟
Aخاصية scrollbar-color هي خاصية قياسية من W3C: تحدد لونين للمقبض والمسار — بسيطة، لكنها لا تغير سوى الألوان والسمك. أما ::-webkit-scrollbar فهو عنصر زائف ملكي لـ WebKit/Chromium يمكنه أيضًا تخصيص العرض والزوايا والحدود — أكثر قدرة بكثير لكنه غير قياسي. يستخدم فايرفوكس الخاصية القياسية؛ بينما يستخدم Chromium وسفاري العنصر الزائف.
Qماذا يفعلان القيمتان dark و light في scrollbar-color؟
Aيُخبر dark المتصفح بعرض شريط التمرير بسمة داكنة — مقبض داكن بمسار فاتح. أما light فهو العكس: مقبض فاتح بمسار داكن. تُحدد الألوان الدقيقة من المتصفح بناءً على المنصة والسمة، وتُستخدم عادةً لمطابقة الوضع الداكن. إذا احتجت إلى ألوان دقيقة، اكتب قيمتي لون مباشرتين: الأولى للمقبض والثانية للمسار.
Qلماذا لا يعمل scrollbar-color في Chrome أو Safari؟
Aيدعم Chrome خاصية scrollbar-color رسميًا بدءًا من الإصدار 121 (وقبل ذلك كان Chromium يستخدم ::-webkit-scrollbar فقط)، ولا يزال Safari لا يتعرف على الخاصية القياسية. لا توجد حل واحد عبر المتصفحات لشريط تمرير موحد: تغطي الخاصية القياسية فايرفوكس وChrome الجديد، بينما يغطي العنصر الزائف Safari وChrome القديم.
Qكيف أجعل ألوان شريط التمرير تعمل في جميع المتصفحات باستخدام CSS؟
Aاستخدم أسلوبًا مزدوجًا: عيّن أولًا ألوان المقبض والمسار باستخدام scrollbar-color القياسية لفايرفوكس (وChrome الجديد)، ثم نمّق شريط تمرير WebKit عبر ::-webkit-scrollbar و ::-webkit-scrollbar-thumb. إن احتجت للمزيد، تراجع إلى مكتبة شريط تمرير بـ JavaScript.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
