اسکرولبار برای وبکیت
380 روز پیش
پويا صادقى , آموزش CSS
سلام 
امروز ساخت اسکرولبار با استفاده از CSS رو با هم یاد میگیریم
این ویژگی هنوز به صورت رسمی برای CSS منتشر نشده و فعلا فقط تو مرورگرهای وبکیت (گوگل کروم و اپل سافاری) ساپورت میشه ، اما در نسخه های آینده فایرفاکس هم پشتیبانی خواهد شد.
روشهای دیگهای که قبلا استفاده میشد و تو بیشتر مرورگرها اجرا میشه، استفاده از جاوا اسکریپت یا استفاده از پلاگین jQuery بود.
این روش فقط با استفاده از کدهای CSS انجام میشه و کدهای -webkit- هم که برای webkit هستن ، پس طبیعتا برای IE و Opera و Firefox کار نمیکنن
ابتدا این کدها رو در CSS قرار میدیم:
::-webkit-scrollbar {background:#fff;}
::-webkit-scrollbar-thumb {background:#999; }
خط اول رنگ بکگراند اسکرول رو مشخص میکنه و خط دوم هم رنگ دستگیره اسکرول:
همونطور که میبینید اسکرول ها خیلی پهن هستند. با تنظیم width و height سایز اسکرول رو تنظیم میکنیم:
::-webkit-scrollbar {
background:#fff;
width:10px;height:10px;
}
::-webkit-scrollbar-thumb {
background:#999;
}
خاصیت width پهنای اسکرول عمودی رو مشخص میکنه و خاصیت height ، پهنای اسکرول افقی رو .
حالا گوشه اسکرول ها رو گرد میکنیم و یه سایه داخلی بهش اضافه میکنیم:
::-webkit-scrollbar {
background:#fff;
width:10px;height:10px;
}
::-webkit-scrollbar-thumb {
background:#999;
border-radius:5px;
box-shadow:inset 0 0 10px #333;
}
با استفاده از خاصیت corner میتونید برای گوشه سمت راست صفحه استایل تنظیم کنید ، من این قسمت رو سفید میکنم:
::-webkit-scrollbar-corner {
background:#fff;
}
با استفاده از خاصیت track میتونیم استایل نوار بکگراند اسکرول (نواری که اسکرول روی اون حرکت میکنه) رو تغییر بدیم؛ در اینجا رنگ بکگراند ، سایه داخلی و border-radius روتنظیم کردم:
::-webkit-scrollbar-track{
background:#eee;
border-radius:5px;
box-shadow:inset 0 0 10px #aaa;}
این هم همه کدهایی که استفاده کردیم:
::-webkit-scrollbar {
background:#fff;
width:10px;height:10px;
}
::-webkit-scrollbar-thumb {
background:#999;
border-radius:5px;
box-shadow:inset 0 0 10px #333;
}
::-webkit-scrollbar-corner {
background:#fff;}
::-webkit-scrollbar-track{
background:#eee;
border-radius:5px;
box-shadow:inset 0 0 10px #aaa;}
اطلاعات بیشتر در سایت وبکیت
