Bir önceki yazımda CSS ile Scrollbars/kaydırma çubuğunun gizlenebilmesini göstermiştim, bu yazımda da sayfa içerisindeki bir bölümün kaydırma çubuğunu yalnızca üzerine gelinince(hover) gösterilmesini anlatacağım.
Örnek kodumuz gayet basit, şöyle:
@media (min-width: 900px){
/* * Yalnızca büyük ekranlı cihazlarda */
.entry-content::-webkit-scrollbar{
-webkit-appearance: none;
width: 1rem;
height: 1rem;
}
.entry-content::-webkit-scrollbar-thumb{
background-color: #cd2653;
border-radius: 1rem;
border: 0;
}
.entry-content::-webkit-scrollbar-track{
border-radius: 1rem;
background-color: transparent;
}
.entry-content pre::-webkit-scrollbar-thumb{
background-color: transparent;
}
.entry-content pre:hover::-webkit-scrollbar-thumb{
background-color: #cd2653;
}
@supports (-moz-appearance: none){
/* ** Firefox için */
.entry-content{
scrollbar-color: #cd2653 #f2f2f2;
scrollbar-width: thin;
}
.entry-content *{
scrollbar-width: thin;
}
.entry-content pre{
scrollbar-color: transparent transparent
}
.entry-content pre:hover{
scrollbar-color: inherit;
}
}
}Yukarıdaki kod benim, bu site için kullandığım yöntem, ben scrollbar rengini transparan yapıp :hover olduğunda istediğim rengin olması şeklinde. Siz kendinize göre özelleştirebilir ayrıca mask şeklinde yapmak için https://css-tricks.com/scrollbars-on-hover/ adresindeki yöntemi de deneyebilirsiniz.
- * Mobil/dokunmatik cihazlar için buna hiç gerek yok çünkü mobil cihazlar kaydırma çubuklarını gayet iyi optimize diyor bu yüzden 900px den büyük ekranlar için yapmak mantıklı.
- ** Firefox için ayrıca yazmak mantıklı çünkü diğer kod yalnızca Chrome/Opera vs. Chrome altyapısı için çalışır. Safari’yi ve başkalarını hiç düşünmeye bile gerek yok zira Windows harici(MacOS/Linux etc.) sistemlerde kaydırma çubukları gayet şık zaten.
SCSS ile yapılmış bir örnek de şu şekilde:
Bu da CSS-Tricks’in yöntemi: