Buat Kotak Dengan Teks Bergulir Menggunakan CSS dan HTML

Sebuah HTML scroll box adalah kotak yang menambahkan scroll bar ke sisi kanan dan bawah ketika isi kotak lebih besar dari dimensi kotak. Dengan kata lain, jika Anda memiliki kotak yang dapat memuat sekitar 50 kata, dan Anda memiliki teks 200 kata, kotak gulir HTML akan menempatkan bilah gulir ke atas untuk memungkinkan Anda melihat 150 kata tambahan. Dalam HTML standar yang hanya akan mendorong teks tambahan di luar kotak.

Membuat scroll HTML cukup mudah. Anda hanya perlu mengatur lebar dan tinggi dari elemen yang ingin Anda gulir dan kemudian gunakan CSS properti overflow untuk mengatur bagaimana Anda ingin pengguliran terjadi.

Apa yang Harus Dilakukan dengan Teks Ekstra?

Bila Anda memiliki lebih banyak teks daripada yang muat di ruang tata letak Anda, Anda memiliki beberapa opsi:

• Tulis ulang teks sehingga lebih pendek dan pas.
• Biarkan teks mengalir melampaui batas dan berharap tata letak dapat melenturkan untuk mendukungnya.
• Potong teks yang meluap.
• Tambahkan bilah gulir (biasanya vertikal untuk teks) sehingga ruang bergulir untuk menampilkan teks tambahan.
  instagram viewer

Opsi terbaik biasanya adalah opsi terakhir: buat kotak teks bergulir. Kemudian teks tambahan masih dapat dibaca, tetapi desain Anda tidak terganggu.

HTML dan CSS untuk ini adalah:

teks di sini... 

Itu melimpah: otomatis; memberitahu browser untuk menambahkan bilah gulir jika diperlukan untuk menjaga teks agar tidak melebihi batas div. Tetapi agar ini berfungsi, Anda juga memerlukan properti gaya lebar dan tinggi yang ditetapkan pada div, sehingga ada batas untuk meluap.

Anda juga dapat memotong teks dengan mengubah overflow: auto; untuk melimpah: tersembunyi; Jika Anda meninggalkan properti overflow, teks akan melampaui batas div.

Anda Dapat Menambahkan Bilah Gulir ke Lebih dari Sekedar Teks

Jika Anda memiliki gambar besar yang ingin Anda tampilkan di ruang yang lebih kecil, Anda dapat menambahkan bilah gulir di sekitarnya dengan cara yang sama seperti yang Anda lakukan dengan teks.

Dalam contoh ini, gambar 400x509 berada di dalam paragraf 300x300.

Tabel Dapat Diuntungkan dari Scroll Bar

Tabel informasi yang panjang bisa menjadi sangat sulit untuk dibaca dengan sangat cepat, tetapi dengan meletakkannya di dalam div dengan ukuran terbatas dan kemudian menambahkan properti overflow, Anda dapat membuat tabel dengan banyak data yang tidak memakan banyak ruang di komputer Anda halaman.

Cara termudah seperti dengan gambar dan teks, cukup tambahkan div di sekitar tabel, atur lebar dan tinggi div itu, dan tambahkan properti overflow:

... 

Satu hal yang terjadi ketika Anda melakukan ini adalah bilah gulir horizontal biasanya muncul karena browser menganggap bahwa bilah gulir krom tumpang tindih dengan tabel. Ada banyak cara untuk memperbaikinya dari mengubah lebar tabel dan lain-lain. Tetapi favorit kami adalah mematikan pengguliran horizontal dengan properti CSS 3 melimpah-x

Tambahkan saja overflow-x: tersembunyi; ke div, dan itu akan menghapus bilah gulir horizontal. Pastikan untuk menguji ini, karena mungkin ada konten yang hilang.

Firefox Mendukung Penggunaan Tag TBODY untuk Overflow

Salah satu fitur yang sangat bagus dari browser Firefox adalah Anda dapat menggunakan properti overflow pada tag tabel bagian dalam seperti tbody dan thead atau tfoot. Ini berarti Anda dapat mengatur bilah gulir pada konten tabel, dan sel tajuk tetap berlabuh di atasnya. Ini hanya berfungsi di Firefox, yang terlalu buruk, tetapi ini adalah fitur yang bagus jika pembaca Anda hanya menggunakan Firefox. Jelajahi contoh ini di Firefox untuk melihat apa yang saya maksud.

...NamaTeleponJennifer502-5366. 

...