Scrollbars hover göster (CSS)

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: