Cara Menyembunyikan Scroll Bar Dengan CSS

Sep

14

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Cara Menyembunyikan Scroll Bar Dengan CSS dan semoga artikel ini bermanfaat.

---

Cara Menyembunyikan Scroll Bar Dengan CSS, mungkin sobat sudah pada tau scroll bar dan sudah menggunakannya dan mungkin juga sobat sudah menggunakan scroll bar yang disembunyikan namun masih mempertahankan fungsinya. Pada kesempatan ini saya akan berbagi tutorial cara menyembunyikan scroll bar dengan CSS buat sobat yang belum menggunakan fungsi ini.

Pada prinsip kerjanya menyembunyikan scroll dengan CSS ini hanya menyembunyikan obyek yang menggunakan scroll sehingga scroll bar tersebut tidak kelihatan, adapun caranya yaitu dengan menambahkan kerangka atau wadah untuk menyimpan obyek tersebut yang ukuran lebarnya dikurangi ukuran scrollbar atu dengan memberikan margin kiri selebar scroll bar. lihat gambar disamping.

Adapun cara tersebut bisa menggunakan 2 cara yang biasa saya lakukan, yaitu dengan menggunakan CSS dan HTML yang terpisah atau dengan penambahan kode CSS langsung pada HTML. 

untuk cara pemasangan menggunakan CSS dan HTML yang terpisah bisa lihat contoh dibawah ini.

KODE CSS.

Ini bisa diletakan diatas kode  ]]></b:skin> atau apabila setelah kode ]]></b:skin> dengan menambahkan kode <style type='text/css'> CSS disini </style>.

#scroll-hide{
  width:100px;
  overflow:hidden;
  background:#000;
}
#scroll-hide .inner{
  width:80px;
  height:200px;
  overflow:auto;
  margin:20px;
  padding-right:20px;
  background:#404040;
}

KODE HTML.
Pada kode HTML sobat tinggal memasukan tag id atau class

<div id="scroll-hide">
<div class="inner">
Konten Disini
</div>
</div>

Lihat Contoh dibawah ini:

Jakarta
Karawang
Bandung
Bekasi
Cianjur
Sukabumi
Sumedang
Cirebon
Tasikmalaya
Garut
Ciamis
Subang
Kuningan
Majalengka
Banjar

Jakarta
Karawang
Bandung
Bekasi
Cianjur
Sukabumi
Sumedang
Cirebon
Tasikmalaya
Garut
Ciamis
Subang
Kuningan
Majalengka
Banjar

Jakarta
Karawang
Bandung
Bekasi
Cianjur
Sukabumi
Sumedang
Cirebon
Tasikmalaya
Garut
Ciamis
Subang
Kuningan
Majalengka
Banjar

Pada contoh pertama scroll belum disembunyikan atau masih secara default.
Pada contoh kedua itu merupakan ilustrasi scroll bar yang disembunyikan.(obyek diberi warna background berbeda, lihat kode background:#404040; pada CSS)

pada contoh ketiga kode  background :#404040; pada CSS dihilangkan.

Apabila mau memasang pada widget di sidebar maka sobat tinggal cari kode <div class='widget-content'> pada setiap kode widget. selanjutnya tinggal mengganti kode tersebut dengan.

<div class='widget-content' id='scroll-hide'>
<div class='inner'> 
-------
</div>
</div>

Contoh:

<b:widget id='HTML5' locked='false' title='title' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
<div class='widget-content' id='scroll-hide'> 
<div class='inner'>
    <data:content/>
</div>
</div>
</b:includable>
</b:widget>

Selanjutnya cara menyembunyikan scroll bar secara langsung pada HTML, khususnya pada widget di sidebar namun cara selengkapnya tunggu ya pada postingan berikutnya.... biar lebih lengkap karena meletakan kode untuk menyembunyikan scroll bar pada sidebar tergantung pada widget yang digunakan sehingga perlu penjelasan satu-satu.

Buat Sobat yang mau mencoba mengedit sendiri kode CSSnya silahkan kunjungi di SINI

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Cara Menyembunyikan Scroll Bar Dengan CSS kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered

BACA JUGA ARTIKEL TERKAIT LAINNYA

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 12:31