Menyembunyikan Scroll Kafe Dengan Css, Namun Tetap Mempertahankan Fungsi Scroll - Dewa Blogger

Halaman

    Social Items

Buy Now
Ini ialah teknik sederhana untuk menyembunyikan  Menyembunyikan Scroll Bar dengan CSS, namun Tetap Mempertahankan Fungsi Scroll

Ini ialah teknik sederhana untuk menyembunyikan scrollbar tanpa menciptakan area menjadi tidak dapat digulung. Dengan mendeklarasikan margin negatif pada sisi kanan area, maka scrollbar secara otomatis akan tersembunyi jauh di sebelah kanan sana. Dan kita masih dapat 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 */ }

Lihat Demo


Sumber https://www.dte.web.id/

Menyembunyikan Scroll Kafe Dengan Css, Namun Tetap Mempertahankan Fungsi Scroll

Ini ialah teknik sederhana untuk menyembunyikan  Menyembunyikan Scroll Bar dengan CSS, namun Tetap Mempertahankan Fungsi Scroll

Ini ialah teknik sederhana untuk menyembunyikan scrollbar tanpa menciptakan area menjadi tidak dapat digulung. Dengan mendeklarasikan margin negatif pada sisi kanan area, maka scrollbar secara otomatis akan tersembunyi jauh di sebelah kanan sana. Dan kita masih dapat 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 */ }

Lihat Demo


Sumber https://www.dte.web.id/