تغییر رنگ اسکرول سایت بدون نیاز به نصب افزونه!

تو این آموزش میخوایم بهتون یه کد معرفی کنیم که با اضافه کردن اون به سایتتون میتونید اسکرول سایتتون رو شخصی سازی کنید و رنگش رو تغییر بدید.

برای تغییر استایل اسکرول سایت دو راه وجود داره ، یکی نصب افزونه و اون یکی استفاده از کد…

از اونجایی که نصب افزونه اضافی رو بهتون پیشنهاد نمیکنیم (به علت کند شدن سایت و فشار اضافی روی هاست) ، برای همین تو این آموزش فقط به معرفی کد تغییر شکل اسکرول سایت می پردازیم.

تغییر رنگ اسکرول سایت خیلی راحته ، کافیه کد زیر رو به فایل استایل قالبتون (معمولا به اسم style.css تو پوشه قالب هست) اضافه کنید :

::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar {
  width: 10px;
}
  
::-webkit-scrollbar-track {
  background: #ffb400; 
    border:1px solid #ccc;
}
  
::-webkit-scrollbar-thumb {
  background: #cc00ff; 
    border:1px solid #eee;
    height:100px;
    border-radius:5px;
}
  
::-webkit-scrollbar-thumb:hover {
  background: blue; 
}

به همین راحتی میشه ظاهر اسکرول بار رو تغییر داد.

درضمن برای اینکه رنگش رو تغییر بدید کافیه بخش هایی که کد رنگ داره رو با کد رنگ دلخواهتون عوض کنید