Menyembunyikan Scroll Bar dengan CSS, namun Tetap Mempertahankan Fungsi Scroll

Diposting oleh Label: di
sidebar
Ini adalah teknik sederhana untuk menyembunyikan scrollbar tanpa membuat area menjadi tidak bisa digulung. Dengan mendeklarasikan margin negatif pada sisi kanan area, maka scrollbar secara otomatis akan tersembunyi jauh di sebelah kanan sana. Dan kita masih bisa menggulung area dengan mouse wheel atau... layar sentuh mungkin?

HTML

12345<div class='hidden-scrollbar'>
    <div class='inner'>
      Teks atau sesuatu yang panjang di sini...
    </div>
</div>

CSS

1234567891011121314.hidden-scrollbar {
  background-color:black;
  border:2px solid #666;
  color:white;  
  overflow:hidden;
  text-align:justify;    
}

.hidden-scrollbar .inner {
  height:200px;
  overflow:auto;
  margin:15px -300px 15px 15px;
  padding-right:300px; /* Samakan dengan besar margin negatif */
}
Posting Komentar
Silahkan koment dengan baik!

Back to Top