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;
}
Top comments (0)