Hide Scrollbars using CSS but Keep Functionality

#css #howto #tricks

Cara untuk menyembunyikan scrollbar tapi konten tetap bisa di-scroll dengan menggunakan CSS.

Explanation

Untuk menyembunyikan scrollbar dengan CSS, sebetulnya kita dapat menggunakan:

.hidden-scrollbar {
  /* Hide vertical and horizontal scrollbars */
  overflow: hidden;
}

atau

.hidden-scrollbar {
  /* Hide vertical scrollbars */
  overflow-y: hidden;
  /* Hide horizontal scrollbars */
  overflow-x: hidden;
}

Apabila kita menggunakan metode di atas, meskipun betul dengan begitu scrollbar akan disembunyikan, akan tetapi konten juga akan menjadi tidak dapat di-scroll seperti yang diharapkan.

Hide Scrollbars But Keep its Function

/*
untuk browser berbasis webkit seperti
Chrome, Opera, Safari dan Edge versi baru
*/
.hidden-scrollbar::-webkit-scrollbar {
  display: none;
}

/* untuk Internet Explorer dan Edge versi lama and Firefox */
.hidden-scrollbar {
  /* IE dan Edge versi lama */
  -ms-overflow-style: none;
  /* Firefox */
  scrollbar-width: none;
}