Cara Membuat Scroll Horizontal dan Vertical di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

sumber : http://super-bee.blogspot.com/2012/02/cara-membuat-scroll-horizontal-dan.html

Sebelumnya saya sudah pernah membahas Cara Membuat Arsip Blog Dengan Fungsi Scroll, . Namun, pada kesempatan kali ini akan membahas Cara Membuat Scroll Horizontar dan Vertical. Mungkin Anda pernah melihat blog yang penuh dengan isinya yang sangat panjang sehingga memperlambat loading blog tersebut dan juga membuat penuh isi postingan.  

Maka dari itu, untuk mengatasi nya kita hanya perlu menggunakan Scrollbar. Dengan begitu kita bisa menghemat pamakaian ruang tulisan blog. Scrollbar terdiri dari 2 macam yang bisa kita gunakan, baik secara Horizontal maupun secara Vertical. Tergantung dari kebutuhan Anda, yang mana yang akan Anda gunakan. Untuk lebih jelas nya, silahkan lihat pada Contoh Kode HTML di bawah ini:

Scroll Vertical :

<div style="border:1px solid white;width:200px;height:100px;overflow-y:hidden;overflow-x:scroll;">

<p style="width:250%;">

Dengan menggunakan overflow-x, kita dapat membuat scroll bar ketika kontent pada div ini lebih lebar dari pada kotakan yang kita buat. Dengan menyeting paragraf menjadi 250%, maka hal ini akan membuat content lebih lebar 250% daripada kotakannya - akibatnya hal ini akan memaksakan terjadinya overflow (menyebabkan munculnya scroll bar).

</p>

</div>

Lihat Contohnya dibawah ini :

Dengan menggunakan overflow-x, kita dapat membuat scroll bar ketika kontent pada div ini lebih lebar dari pada kotakan yang kita buat. Dengan menyeting paragraf menjadi 250%, maka hal ini akan membuat content lebih lebar 250% daripada kotakannya - akibatnya hal ini akan memaksakan terjadinya overflow (menyebabkan munculnya scroll bar).

Anda juga bisa mengatur warna kotak, tinggi, serta lebar (Lihat Tulisan berwarna merah diatas)

Untuk Scroll Horizontal Lihat dibawah ini :

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid white">

Jika tanpa Setingan "paksaan" di tag paragraf <p>, maka cukup mudah untuk membuat scroll bar vertikal seperti ini.

</div>

Lihat hasilnya :

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid white">
Jika tanpa Setingan "paksaan" di tag paragraf <p>, maka cukup mudah untuk membuat scroll bar vertikal seperti ini.
</div>