اسکرول بار سفارشی Webkit
شما می توانید با قابلیت های css3 یک اسکرول بار زیبا برای مرورگرهای webkit بسازید و از شر اسکرول بار(نوارپیماش)های پیش فرض این نوع مرورگرها رها شوید.
به این استایل و عکس زیر آن لطفا دقت کنید تا با دیدن عکس به صورت مفهومی با تعیین خاصیت ها و مقدارهای این نوع اسکرول در مروگرهای Webkit به خوبی آشنا شوید.
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
همانطور که در تصویر مشاهد می کتید خاصیت های مربوط به هر قسمت با شماره مشخص شده است.
دست شما در مقداردهی این خاصیت تقریبا باز هست.
به عنوان مثال:
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
هیچ نظری موجود نیست:
ارسال یک نظر