Css ile Scrollbar Tasarımını Değiştirme

Default profile image
AnkaAkademi • 6 Haziran 2017
Css

Web sitenizin klasik scrollbar tasarımından sıkıldıysanız ve bu tasarımı kolayca istediğiniz şekilde renkte ve boyutta optimize etmek istiyorsanız yalnızca css ile bu işlemi yapabilirsiniz.

Bunun için taslak kodları sizinle paylaşacağım. Bu kodları istediğiniz şekilde optimize edip kullanabilirsiniz.

  
#bellibirbölge::-webkit-scrollbar {
   width: 5px;
}
  
#bellibirbölge::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
  
#bellibirbölge::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgb(64, 63, 63); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
#bellibirbölge::-webkit-scrollbar-thumb:window-inactive {
    background: rgb(64, 63, 63); 
}

Yukarıda vermiş olduğum kodlarda ince nüans şudur. #bellibirbölge yazdığım kısım sizin diviniz oluyor. Atıyorum #XXXX adında bir diviniz var ve yalnız bu divin scrollbarının tasarımını değiştirmek istiyorsunuz.Bu durumda özel olarak bu kısma div eklemelisiniz. Site geneli aynı scrollbar tasarımını kullanmak için ise oradaki div tanımlamasını tamamen kaldırmalısınız.

Bir sonraki ipucu dersinde görüşmek üzere...