آموزش تغییر ظاهر اسکرول بار سایت وردپرس

آموزش تغییر ظاهر اسکرول بار سایت وردپرس

تاحالا به این فکر افتاده اید که ظاهر اسکرول بار مرورگر خود را تغییر دهید و نظر کاربر را جلب کنید. شما براحتی میتوانید این کار را انجام دهید و یک اسکرول بار اختصاصی طراحی نمایید.

برای تغییر ظاهر اسکرول بار کافیست کد زیر را در 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; 
}

این کد بیشتر بر روی مرورگرهای دسکتاپ مانند گوگل، سافاری و اپرا کار میکند و در بعضی از نسخه ها قابل اجرا نمیباشد

شما برای انجام اینکار میتوانید از افرونه Advanced scrollbar هم استفاده نمایید