كيفية إنشاء: شريط تمرير مخصص

تعلم كيفية إنشاء شريط تمرير مخصص باستخدام CSS.

كيفية إنشاء شريط تمرير مخصص

يدعم Chrome وEdge وسafari وOpera المزيفات غير المعاييرية ::webkit-scrollbar الجزء المزيف، الذي يسمح لنا بتعديل مظهر شريط التمرير للمتصفح.

في المثال التالي، تم إنشاء شريط تمرير ذو عرض 10 بكسل، يحتوي على مسار/لون الشريط ذو لون رمادي وتمرير ذو لون داكن (رقم 888):

/* العرض */
::webkit-scrollbar {
  width: 10px;
}
/* مسار */
::webkit-scrollbar-track {
  background: #f1f1f1;
}
/* المزلق */
::webkit-scrollbar-thumb {
  background: #888;
}
/* المزلق عند وضع الماوس عليه */
::webkit-scrollbar-thumb:hover {
  background: #555;
}

جرب بنفسك

هذا المثال يخلق شريط تمرير يحتوي على تأثير الظلال:

مثال

/* العرض */
::webkit-scrollbar {
  width: 20px;
}
/* مسار */
::webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
/* المزلق */
::webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

جرب بنفسك

مخترق شريط التمرير

للمتصفحات التي تعتمد على Webkit، يمكنك استخدام العناصر المزيفة التالية لتخصيص شريط التمرير للمتصفح: