اسکرول‌بار برای وبکیت

این روش فقط با استفاده از کدهای CSS انجام میشه و کدهای -webkit- هم که برای webkit هستن ، پس طبیعتا برای و Firefox کار نمیکنن

ابتدا این کدها رو در CSS قرار میدیم:










1
::-webkit-scrollbar {background:#fff;}






2
::-webkit-scrollbar-thumb {background:#999; }

خط اول رنگ بکگراند اسکرول رو مشخص میکنه و خط دوم هم رنگ دستگیره اسکرول:

​

همونطور که می‌بینید اسکرول ها خیلی پهن هستند. با تنظیم width و height سایز اسکرول رو تنظیم میکنیم:










1
::-webkit-scrollbar {






2
background:#fff;






3
width:10px;height:10px;






4
}






5
::-webkit-scrollbar-thumb {






6
background:#999;






7
}

خاصیت width پهنای اسکرول عمودی رو مشخص میکنه و خاصیت height ، پهنای اسکرول افقی رو .

​

حالا کاربران میهمان قادر به مشاهده لینک ها نمیباشند .برای عضویت در تالار گفتگوی ایرانیان اینجا کلیک کنید و یه سایه داخلی بهش اضافه میکنیم:










1
::-webkit-scrollbar {






2
background:#fff;






3
width:10px;height:10px;






4
}






5
::-webkit-scrollbar-thumb {






6
background:#999;






7
border-radius:5px;






8
box-shadow:inset 0 0 10px #333;






9
}

​

با استفاده از خاصیت corner میتونید برای گوشه سمت راست صفحه استایل تنظیم کنید ، من این قسمت رو سفید میکنم:










1
::-webkit-scrollbar-corner {






2
background:#fff;






3
}

با استفاده از خاصیت track میتونیم استایل نوار بکگراند اسکرول (نواری که اسکرول روی اون حرکت میکنه) رو تغییر بدیم؛ در اینجا رنگ بکگراند ، سایه داخلی و border-radius روتنظیم کردم:










1
::-webkit-scrollbar-track{






2
background:#eee;






3
border-radius:5px;






4
box-shadow:inset 0 0 10px #aaa;}

​

این هم همه کدهایی که استفاده کردیم:










1
::-webkit-scrollbar {






2
background:#fff;






3
width:10px;height:10px;






4
}






5
::-webkit-scrollbar-thumb {






6
background:#999;






7
border-radius:5px;






8
box-shadow:inset 0 0 10px #333;






9
}






10
::-webkit-scrollbar-corner {






11
background:#fff;}






12
::-webkit-scrollbar-track{






13
background:#eee;






14
border-radius:5px;






15
box-shadow:inset 0 0 10px #aaa;}