Pemprograman HTML - Belajar buat Scroll Box di HTML

Assalamualaikum wr. wb.

Di artikel kali ini saya ingin membagikan code scroll box yang saya kumpulkan dari berbagai sumber . Scroll Box adalah bagian dari bilah gulir yang membantu menunjukkan lokasi Anda di dalam dokumen, bidang, atau jendela. Anda juga dapat menggulir cepat halaman dengan mengklik dan menyeret kotak gulir ke tempat Anda ingin pergi.

definisi itu saya kutip dari Computerhope.com

oke, selanjutnya berikut ini adalah contoh beberapa Scroll Box yang saya modifikasi dari berbagai sumber.

• Basic HTML Scroll Box

<div style="height:120px;width:120px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">Seperti yang Anda lihat, begitu ada cukup teks di kotak ini, kotak itu akan menumbuhkan scroll bar ... itulah mengapa kami menyebutnya kotak gulir! Anda juga bisa menempatkan gambar ke dalam kotak gulir.</div>

Seperti yang Anda lihat, begitu ada cukup teks di kotak ini, kotak itu akan menumbuhkan scroll bar ... itulah mengapa kami menyebutnya Scroll Box! Anda juga bisa menempatkan gambar ke dalam Scroll Box.

• Colored Scroll Boxes

<div style="height:100px;width:140px;overflow:auto;background-color:yellowgreen;color:white;scrollbar-base-color:gold;font-family:sans-serif;padding:10px;">This HTML scroll box has had color added. You can add color to the background of your scroll box. You can also add color to the scroll bars.</div>

Scroll Box HTML ini telah ditambahkan warna. Anda dapat menambahkan warna ke latar belakang Scroll Box Anda. Anda juga dapat menambahkan warna pada Scroll Box.

• Scroll Box with Image

<div style="height:180px;width:180px;overflow:auto;"><img src="/pix/samples/11m.jpg" alt="Sample picture for scroll box"></div>

• Scroll Box Borders

<div style = "height: 50px; width: 300px; overflow: auto; border: 4px solid yellowgreen; padding: 2%"> Scroll Box ini memiliki batas yang ditambahkan padanya. Anda dapat menambahkan batas ke apa pun dalam HTML - termasuk Scroll Box. </div>

Scroll Box ini memiliki batas yang ditambahkan padanya. Anda dapat menambahkan batas ke apa pun dalam HTML - termasuk Scroll Box.

• Horizontal Scroll

<div style="border:1px solid black;height:100px;width:140px;overflow-y:hidden;overflow-x:scroll;"><p style="width:250%;">
Dengan menggunakan overflow-x, kita dapat membuat scroll bar ketika isi div ini lebih lebar dari kontainer. Dengan menetapkan paragraf ini menjadi 200 persen, itu adalah 200 persen lebih luas dari wadah induk - memaksa meluap. </p></div>

Dengan menggunakan overflow-x, kita dapat membuat scroll bar ketika isi div ini lebih lebar dari kontainer. Dengan menetapkan paragraf ini menjadi 200 persen, itu adalah 200 persen lebih luas dari wadah induk - memaksa meluap.

Semoga Artikel ini bermanfaat, berbagi jika menurutmu artikel ini bermanfaat, Terimakasih sudah membaca.