Artikel ini menunjukkan metode untuk menghentikan konten agar tidak meluap dan mengaktifkan pengguliran menggunakan CSS.
Bagaimana Cara Menghentikan Melimpahnya Konten dan Mengaktifkan Pengguliran?
Tujuan untuk menghentikan konten agar tidak meluap adalah agar konten sesuai dengan wadahnya dan tidak berdampak negatif terhadap kinerja situs web. Itu dapat dengan mudah memahami konteks dan dapat meningkatkan aksesibilitas ke ujung pengguna. Untuk penjelasan detailnya mari kita bahas melalui contoh :
Langkah 1: Aktifkan Scrolling dengan Content Overflow
Awalnya, mulailah dengan membuat tabel di dalam file HTML tempat efek gulir akan diterapkan. Mari kita asumsikan, tabel sudah dibuat, dan terdiri dari enam baris dan tujuh kolom, dan beberapa data dummy disediakan ke tabel:
< meja >
< tr >
< th > Kepala 1 < / th >
< th > Kepala 2 < / th >
< th > Kepala 3 < / th >
< th > Kepala 4 < / th >
< th > Kepala 5 < / th >
< th > Kepala 6 < / th >
< th > Kepala 7 < / th >
< / tr >
< tr >
< td > Baris 1 < / td >
< td > Baris 1 < / td >
< td > Baris 1 < / td >
< td > Baris 1 < / td >
< td > Baris 1 < / td >
< td > Baris 1 < / td >
< td > Baris 1 < / td >
< / tr >
< tr >
< td > Baris 2 < / td >
< td > Baris 2 < / td >
< td > Baris 2 < / td >
< td > Baris 2 < / td >
< td > Baris 2 < / td >
< td > Baris 2 < / td >
< td > Baris 2 < / td >
< / tr >
< tr >
< td > Baris 3 < / td >
< td > Baris 3 < / td >
< td > Baris 3 < / td >
< td > Baris 3 < / td >
< td > Baris 3 < / td >
< td > Baris 3 < / td >
< td > Baris 3 < / td >
< / tr >
< tr >
< td > Baris 4 < / td >
< td > Baris 4 < / td >
< td > Baris 4 < / td >
< td > Baris 4 < / td >
< td > Baris 4 < / td >
< td > Baris 4 < / td >
< td > Baris 4 < / td >
< / tr >< tr >
< td > Baris 5 < / td >
< td > Baris 5 < / td >
< td > Baris 5 < / td >
< td > Baris 5 < / td >
< td > Baris 5 < / td >
< td > Baris 5 < / td >
< td > Baris 5 < / td >
< / tr >
< tr >
< td > Baris 6 < / td >
< td > Baris 6 < / td >
< td > Baris 6 < / td >
< td > Baris 6 < / td >
< td > Baris 6 < / td >
< td > Baris 6 < / td >
< td > Baris 6 < / td >
< / tr >
< / meja >
Setelah eksekusi potongan kode di atas, halaman web muncul seperti ini:
Keluaran menampilkan bahwa data tabel dalam format yang kurang dapat dibaca dan banyak ruang yang diperoleh oleh tabel.
Langkah 2: Mengatur Overflow dan Scrolling Effect Dalam cuplikan kode di atas: Setelah eksekusi potongan kode di atas, halaman web muncul seperti ini: Halaman web mengilustrasikan bahwa tabel sekarang menggunakan lebih sedikit ruang dan menghentikan konten agar tidak meluap. Selain itu, efek bergulir telah diaktifkan. Catatan : Dengan menyetel “ meluap: otomatis ' atau ' luapan: gulir ”, pengguna dapat mengaktifkan pengguliran untuk konten yang melimpah. Selain itu, “ meluap: tersembunyi ” dapat digunakan untuk mencegah luapan sama sekali. Properti 'overflow-x' dan 'overflow-y' digunakan untuk mengontrol luapan dan mengaktifkan pengguliran pada sumbu horizontal dan vertikal. Ini mencegah konten meluap dan memungkinkan pengguliran untuk membuat desain responsif interaktif untuk semua perangkat. Artikel ini telah menunjukkan cara menghentikan konten agar tidak meluap dan mengaktifkan pengguliran menggunakan CSS.
Setelah itu, bungkus meja dengan induk “
.meluap {
lebar : 200px ;
tinggi : 200px ;
luapan-x : mobil ;
luapan-y : mobil ;
gulir-perilaku : mulus ;
}
Kesimpulan