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:

wolkanca.com’da Scrollbars hover göster (CSS) veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, Scrollbars hover göster (CSS) için ya da değil DM kapısı her daim açık. Yazıyı beğendiyseniz paylaşın, daha fazla ilgili gönderi için hemen aşağıdaki menülere göz gezdirebilirsiniz, okuduğunuz için teşekkürler, saygılar sevgiler.