Tuesday, March 8, 2011

Membuat horizontal scroll bar dan vertical scroll bar

Ketika sedang mempelajari optimasi waktu loading dari aplikasi website, terdapat banyak teknik yang bisa diterapkan pada skrip yang kita buat. Salah satunya adalah "menyembunyikan" (karena tidak persis disembunyikan aslinya) konten di dalam scroll bar.
Nah, ternyata ada satu permasalahan yang saya hadapi. Di internet, tidak banyak tutorial yang menjelaskan cara membuat scroll bar yang mendatar (horizontal scroll bar). Karenanya saya tertarik untuk men-sharing-kannya di blog ini.
Berikut ini adalah skrip-nya :

<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>

Contoh tampilan : anda bisa lihat langsung pada tulisan yang saya buat ini (he..he..)

Sedang untuk vertikal scroll bar, tidak terlalu sulit. Bahkan ada banyak sekali tutorialnya jika kita search di mbah Google. Berikut ini adalah skripnya :
<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. Tutorial diinternetnya pun cukup banyak.
</div>

Hasilnya?
Ah, anda sudah melihatnya secara langsung. He.. he..

Cat: Anda bisa mengkreasikan besaran width dan height pada kotakan scroll bar di atas.
Selamat mencoba..

5 comments:

  1. terimakasih tutorialnya
    sangat membantu tugas akhir saya

    ReplyDelete
  2. saiddd banget... maksih min, silahkan cek hasilnya di www.davit-wae.blogspot.com :)

    ReplyDelete
  3. Wow, terima kasih banyak tutorialnya. Izinkan saya COPAS utk melengkapi program saya di PHP. Sukses slalu ya !!!

    ReplyDelete
  4. makasih tutorialnya sangat membantu dan menambah pengetahuan saya

    ReplyDelete
  5. membuat link didalam textarea gimana ya....saya bikin href nya kok malah outputnya script hreftnya asli

    ReplyDelete