مولّد شريط التمرير CSS

الخصائص القياسية الحديثة (2023 فما بعد)

/* Applies to the element that scrolls */
html {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #4f46e5 #e5e7eb; /* thumb track */
}

دعم المتصفحات (2024):

• scrollbar-width: Chrome 121+، Safari 18.2+، Firefox 64+.
• scrollbar-color: Chrome 121+، Safari 18.2+، Firefox 64+.
• scrollbar-gutter: stable: Chrome 94+، Safari 14+، Firefox 97+. يحجز مساحة شريط التمرير حتى عند عدم الحاجة إليها، مما يمنع إزاحة التخطيط.

العناصر الزائفة لـ webkit (Chrome، Safari، Edge الأقدم)

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3730a3;
}

تحكّم أدقّ. تحدّد width عرض شريط التمرير العمودي، وتحدّد height ارتفاع شريط التمرير الأفقي. أضِف كليهما للحاويات التي يمكن أن تُمرَّر في أيّ اتجاه.

ترتيب النهجين تراتبيًا

حدّد القواعد الحديثة أولًا، ثم webkit كتحسين للمتصفحات التي تعرض النوعين:

.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #4f46e5 #e5e7eb;
}
.scroll-area::-webkit-scrollbar       { width: 8px; }
.scroll-area::-webkit-scrollbar-track { background: #e5e7eb; }
.scroll-area::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 4px;
  border: 2px solid #e5e7eb;
}

يلتزم Firefox بقواعد scrollbar-* الحديثة فقط. ويلتزم Chrome وSafari بقواعد webkit (التي تتجاوز القواعد الحديثة، فيبقى السلوك متّسقًا).

scrollbar-gutter يمنع إزاحة المحتوى

بدون مساحة محجوزة، يُعاد تدفّق المحتوى عند ظهور شريط التمرير (شائع في القوائم الديناميكية). الحل:

html { scrollbar-gutter: stable; }
/* or */
html { scrollbar-gutter: stable both-edges; }

تُحجَز مساحة شريط التمرير سواء تمرّر المحتوى أم لا. يضيف both-edges مساحة مماثلة على الجانب المقابل لإبقاء المحتوى موسّطًا بصريًا.

إخفاء أشرطة التمرير بالكامل

.no-scrollbar {
  scrollbar-width: none;           /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

كن حذرًا: إخفاء شريط التمرير يمنع المستخدمين من إدراك أنّ المحتوى قابل للتمرير. استخدمه فقط مع مؤشّر واضح (أسهم، نقاط صفحات)، أو عندما يكون سلوك التمرير بديهيًا من السياق (الدوّارات الأفقية، سجلّات المحادثة).

اعتبارات الأجهزة المحمولة

على iOS وAndroid، لا تظهر أشرطة التمرير إلا للحظة أثناء التمرير. يظلّ ملف CSS المخصّص لشريط التمرير مطبَّقًا، لكن قد لا يراه المستخدمون أكثر من ثانية. صمّم وفقًا لذلك: لا تبالغ في الاستثمار في لمسات بصرية نادرًا ما تظهر.

إمكانية الوصول

• التباين: ينبغي أن يحقّق المقبض مقابل المسار نسبة 3:1 للتباين غير النصّي (WCAG 1.4.11).
• العرض: قد يصعب الإمساك بأشرطة التمرير الرفيعة بالفأرة، خاصةً للمستخدمين ذوي الإعاقات الحركية. العرض العادي إعداد افتراضي أكثر أمانًا.
• لا تُزِل شريط التمرير أبدًا في المناطق القابلة للتمرير دون توفير وسيلة تمرير أخرى، وإلا فسيتعطّل المستخدمون الذين يعتمدون عليه.