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: