Menyembunyikan Scroll Bar dengan CSS, namun Tetap Mempertahankan Fungsi Scroll ~ Syntax dan script PHP

Kamis, 28 Juni 2012

Menyembunyikan Scroll Bar dengan CSS, namun Tetap Mempertahankan Fungsi Scroll

Posted by Stasiun Geofisika Alor Posted on 02.06 No comments

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

HTML

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

CSS

.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 */
}