مولّد شريط تمرير CSS مخصص

استبدل شريط التمرير الرمادي الافتراضي بنسخة تناسب ألوان موقعك: اضبط العرض والألوان واستدارة الزوايا، وعاين النتيجة مباشرة، ثم انسخ شيفرة CSS الجاهزة للاستخدام. يُحسب كل شيء محليًا داخل متصفحك.

أمثلة:

العرض: 10px

الاستدارة: 8px

لون المسار

لون المؤشر

اللون عند التمرير فوق العنصر

سطر المحتوى القابل للتمرير رقم 1 — مرّر لمشاهدة الشريط.

سطر المحتوى القابل للتمرير رقم 2 — مرّر لمشاهدة الشريط.

سطر المحتوى القابل للتمرير رقم 3 — مرّر لمشاهدة الشريط.

سطر المحتوى القابل للتمرير رقم 4 — مرّر لمشاهدة الشريط.

سطر المحتوى القابل للتمرير رقم 5 — مرّر لمشاهدة الشريط.

سطر المحتوى القابل للتمرير رقم 6 — مرّر لمشاهدة الشريط.

سطر المحتوى القابل للتمرير رقم 7 — مرّر لمشاهدة الشريط.

سطر المحتوى القابل للتمرير رقم 8 — مرّر لمشاهدة الشريط.

سطر المحتوى القابل للتمرير رقم 9 — مرّر لمشاهدة الشريط.

سطر المحتوى القابل للتمرير رقم 10 — مرّر لمشاهدة الشريط.

سطر المحتوى القابل للتمرير رقم 11 — مرّر لمشاهدة الشريط.

سطر المحتوى القابل للتمرير رقم 12 — مرّر لمشاهدة الشريط.

تستخدم المعاينة الخاصية ::-webkit-scrollbar (Chrome وEdge وSafari) والخاصية scrollbar-color (Firefox)؛ وقد يختلف العرض قليلًا بحسب متصفحك.

شيفرة CSS

.byteryo-custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #8b5cf6 #1e1e2e;
}

.byteryo-custom-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-track {
  background: #1e1e2e;
  border-radius: 8px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-thumb {
  background: #8b5cf6;
  border-radius: 8px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #a78bfa;
}

كيف يعمل

لا توجد خاصية CSS قياسية واحدة لتنسيق شريط التمرير: فالمتصفحات المبنية على Chromium (Chrome وEdge وSafari) تستخدم العناصر الزائفة ::-webkit-scrollbar، بينما يستخدم Firefox الخاصيتين scrollbar-width وscrollbar-color. تولّد هذه الأداة الصيغتين معًا، في كتلة CSS محصورة بصنف واحد، كي تُطبَّق النتيجة على الحاوية التي تستهدفها فقط لا على الصفحة كلها.

كيف أطبّق هذه الشيفرة على حاويتي الخاصة؟

انسخ شيفرة CSS الناتجة، وغيّر اسم الصنف byteryo-custom-scrollbar بحسب اصطلاح التسمية لديك، ثم أضف هذا الصنف إلى عنصر HTML الذي تريد تخصيص شريط تمريره (مثل div يحمل overflow: auto أو overflow: scroll).

هل سيكون العرض متطابقًا في جميع المتصفحات؟

لا: يقبل Firefox العرض (رفيع أو تلقائي) والألوان فقط عبر scrollbar-color، دون استدارة ولا لون منفصل عند التمرير فوق العنصر، بينما تتيح المتصفحات المبنية على Chromium تحكمًا أدق. تغطي الشيفرة الناتجة أفضل عرض ممكن في كل محرك، لكن يبقى وجود فارق بصري طفيف بين المتصفحات أمرًا طبيعيًا.

تُكوَّن شيفرة CSS بالكامل داخل متصفحك: لا تُرسل أي بيانات إلى خادم أثناء التوليد.