tidak banyak tutorial yang menjelaskan cara membuat scroll bar yang mendatar (horizontal scroll bar). Karenanya saya tertarik untuk men-sharing-kannya di blog ini.
scripnya untuk Horizontal Scroll:
<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>
<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>
Untuk Vertikalnya :
<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>
Jika tanpa Setingan "paksaan" di tag paragraf <p>, maka cukup mudah untuk membuat scroll bar vertikal seperti ini. Tutorial diinternetnya pun cukup banyak.
</div>
Sekian dan terimakasih :)
0 Response to "Membuat Scroll dengan CSS"
Post a Comment