كيف إلى - شريط التمرير المخصص
تعرف على كيفية إنشاء شريط تمرير مخصص باستخدام CSS.
أشرطة التمرير المخصصة
ملاحظة: أشرطة التمرير المخصصة غير مدعومة في Firefox أو في Edge ، الإصدار السابق 79.
كيفية إنشاء أشرطة تمرير مخصصة
يدعم Chrome و Edge و Safari و Opera العنصر الزائف غير القياسي ::-webkit-scrollbar
، والذي يسمح لنا بتعديل مظهر شريط التمرير في المتصفح.
ينشئ المثال التالي شريط تمرير رفيع (بعرض 10 بكسل) ، وله مسار / شريط رمادي اللون ومقبض رمادي غامق (# 888):
مثال
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
ينشئ هذا المثال شريط تمرير بظل مربع:
مثال
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px
grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
محددات شريط التمرير
بالنسبة لمتصفحات webkit ، يمكنك استخدام العناصر الزائفة التالية لتخصيص شريط التمرير بالمستعرض:
::-webkit-scrollbar
شريط التمرير.::-webkit-scrollbar-button
الأزرار الموجودة على شريط التمرير (الأسهم تشير لأعلى ولأسفل).::-webkit-scrollbar-thumb
مقبض التمرير القابل للسحب.::-webkit-scrollbar-track
المسار (شريط التقدم) لشريط التمرير.::-webkit-scrollbar-track-piece
المسار (شريط التقدم) لا يغطيها المقبض.::-webkit-scrollbar-corner
الزاوية السفلية من شريط التمرير ، حيث يلتقي شريطا التمرير الأفقي والرأسي.::-webkit-resizer
مقبض تغيير الحجم القابل للسحب الذي يظهر في الزاوية السفلية لبعض العناصر.