Kategoriler
Kodlama

Scrollbars gizlemek (CSS)

CSS ile sayfadaki kaydırma çubuğunu/scrollbars gizlemek.

Bazen, bazı durumlarda sayfanın kaydırabilmesini ancak kaydırma çubuğunun görünmesini istemezsiniz(görünmez kaydırma çubuğu / overflow:hidden; değil) böyle durumlarda burada yazacağım CSS metodunu kullanabilirsiniz.

Mac kullanıcıları Windows kullanıcılarına göre daha az kaydırma çubuğu görürler çünkü MacOS’un arayüzü hiç kuşkusuz daha akıllıdır, Mac’den Windows’a geçen insanların kaydırma çubuklarına alışması zaman alır.

Aşağıdaki görselde bir Mac kullanıcısı için kaydırma çubuklarının nasıl daha iyi göründüğünü görebilirsiniz:

Mac’de kaydırma çubukları
Mac’de kaydırma çubukları

CSS kodumuz basit: https://codepen.io/rebelchris/pen/ExNmXGB

.no-scroll{
  -ms-overflow-style: none; /* IE ve Edge */
  scrollbar-width: none; /* Firefox */
}
.no-scroll::-webkit-scrollbar{
  display: none; /* Chrome, Safari ve Opera */
}

Okuduğunuz için teşekkürler ve hadi bağlanalım!

Blogumu okuduğunuz için teşekkür ederim. E-posta bültenime abone olmaktan ve Linkedin veya Twitter’dan bağlanmaktan çekinmeyin