تنسيق شريط التمرير باستخدام ::-webkit-scrollbar
خصّص مظهر شريط التمرير باستخدام العناصر الزائفة لـ webkit والخاصية scrollbar-color
تنسيق شريط التمرير باستخدام ::-webkit-scrollbar درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
نظرة عامة على تنسيق أشرطة التمرير
تعرض المتصفحات أشرطة تمرير افتراضية تختلف باختلاف أنظمة التشغيل. يتيح CSS تخصيص مظهر أشرطة التمرير باستخدام العناصر الزائفة غير القياسية الخاصة بـ webkit والخصائص القياسية الحديثة.
::-webkit-scrollbar
العنصر الزائف الجذر لشريط التمرير بأكمله. اضبط العرض (للتمرير الرأسي) والارتفاع (للتمرير الأفقي):
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>::-webkit-scrollbar-track
المسار هو القناة الخلفية التي تنزلق عليها القبضة:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>::-webkit-scrollbar-thumb
القبضة هي مؤشر التمرير القابل للسحب:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>شريط تمرير مخصص متكامل
تنفيذ متكامل لشريط تمرير مخصص:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>المعيار الحديث: scrollbar-color
تُعد scrollbar-color خاصيةً قياسية تدعمها Firefox. وتضبط لوني القبضة والمسار في تصريح واحد:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>المعيار الحديث: scrollbar-width
تتحكم scrollbar-width في حجم شريط التمرير باستخدام قيم كلمات مفتاحية:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>تنسيق أشرطة التمرير عبر المتصفحات
لضمان التوافق الكامل بين المتصفحات، استخدم النهجين معًا:
<div class="scroll-box">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>إخفاء أشرطة التمرير مع الحفاظ على التمرير
اجعل العنصر قابلًا للتمرير، لكن أخفِ شريط التمرير مرئيًا:
<div class="hide-scrollbar">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6</div>أشرطة التمرير في الوضع الداكن
استخدم خاصية CSS color-scheme للحصول على أشرطة تمرير داكنة أصلية من نظام التشغيل من دون تنسيق مخصص:
<p>Uses OS-native scrollbar theme via <code>color-scheme</code>.</p>تذكير بإمكانية الوصول
لا تجعل أشرطة التمرير صغيرة جدًا أو غير مرئية بطريقة تصعّب اكتشاف التمرير. تكون أشرطة التمرير المخفية مناسبة للتصميمات التي تركز على اللمس، لكنها قد تسبب الالتباس على أجهزة سطح المكتب.
تحقق سريع
ما الخاصية القياسية في CSS التي تضبط ألوان أشرطة التمرير وتدعمها Firefox؟
خلاصة
خصّص أشرطة التمرير باستخدام العناصر الزائفة ::-webkit-scrollbar (WebKit) والخصائص القياسية scrollbar-color/scrollbar-width (Firefox والمتصفحات الحديثة). استخدم النهجين معًا لتحقيق دعم كامل عبر المتصفحات. استخدم scrollbar-width: none مع البديل الخاص بـ webkit لإخفاء أشرطة التمرير مع الحفاظ على وظيفة التمرير.
الأسئلة الشائعة
هل درس «تنسيق شريط التمرير باستخدام ::-webkit-scrollbar» مجاني؟
نعم — نص درس «تنسيق شريط التمرير باستخدام ::-webkit-scrollbar» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «تنسيق شريط التمرير باستخدام ::-webkit-scrollbar»؟
خصّص مظهر شريط التمرير باستخدام العناصر الزائفة لـ webkit والخاصية scrollbar-color تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «تنسيق شريط التمرير باستخدام ::-webkit-scrollbar»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- overflow: hidden وscroll وauto وclip
- scroll-behavior: smooth
- scroll-snap-type وscroll-snap-align
- تنسيق شريط التمرير باستخدام ::-webkit-scrollbar