Maxsus aylantirish chizig‘i (scrollbar)
CSS yordamida maxsus aylantirish chizig‘ini (scrollbar) yaratishni o‘rganing.
Maxsus aylantirish chiziqlari (scrollbar)
Eslatma: Maxsus aylantirish chiziqlari Firefox’da yoki 79-versiyadan oldingi Edge’da qo‘llab-quvvatlanmaydi.
Maxsus aylantirish chiziqlari qanday yaratiladi
Chrome, Edge, Safari va Opera nostandart ::-webkit-scrollbar psevdoelementini qo‘llab-quvvatlaydi, u brauzer aylantirish chizig‘ining ko‘rinishini o‘zgartirish imkonini beradi.
Quyidagi misol kulrang yo‘lakchali (track) va to‘q kulrang (#888) tutqichli (handle) ingichka (10px kenglikdagi) aylantirish chizig‘ini yaratadi:
Misol
/* 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;
}
O‘zingiz sinab ko‘ring »
Bu misol soyali (box shadow) aylantirish chizig‘ini yaratadi:
Misol
/* 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;
}
O‘zingiz sinab ko‘ring »
Aylantirish chizig‘i selektorlari
Webkit brauzerlarida brauzer aylantirish chizig‘ini sozlash uchun quyidagi psevdoelementlardan foydalanishingiz mumkin:
::-webkit-scrollbar— aylantirish chizig‘ining o‘zi.::-webkit-scrollbar-button— aylantirish chizig‘idagi tugmalar (yuqoriga va pastga yo‘nalgan strelkalar).::-webkit-scrollbar-thumb— suriladigan aylantirish tutqichi.::-webkit-scrollbar-track— aylantirish chizig‘ining yo‘lakchasi (progress bar).::-webkit-scrollbar-track-piece— yo‘lakchaning (progress bar) tutqich bilan QOPLANMAGAN qismi.::-webkit-scrollbar-corner— aylantirish chizig‘ining pastki burchagi, bu yerda gorizontal va vertikal aylantirish chiziqlari tutashadi.::-webkit-resizer— ba’zi elementlarning pastki burchagida paydo bo‘ladigan, o‘lchamni o‘zgartirish uchun suriladigan tutqich.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!