CSS “ meluap ” digunakan untuk mengontrol limpahan konten untuk elemen HTML yang dipilih. Konten dapat dikontrol dalam satu arah tertentu dengan bantuan “ luapan-y ' Dan ' luapan-x ” properti. Properti “overflow” menerima nilai seperti “ menggulir ”, “ bisa dilihat ”, “ tersembunyi ' Dan ' mobil ” dan fungsinya berbeda satu sama lain. Namun, panduan ini menunjukkan perbedaan antara overflow:scroll dan overflow:auto menggunakan contoh praktis.
Bagaimana overflow:scroll Berbeda Dengan overflow:auto?
Perbedaan utama antara “ menggulir ' Dan ' mobil ” nilai adalah bahwa “ meluap: gulir ” selalu menampilkan bilah gulir apakah diperlukan atau tidak yang menimbulkan gangguan visual. Di sisi lain, “ meluap: otomatis ” hanya menampilkan bilah gulir saat konten meluap. Dengan cara ini, desain yang lebih bersih dan lebih ramping dapat dibuat yang dengan mudah menarik perhatian pengguna.
Contoh 1: Menggunakan properti overflow:scroll
CSS “ meluap: gulir ” properti menyetel bilah gulir secara default untuk mengontrol konten yang meluap. Itu tidak melihat konten luapan dan kemudian menerapkan bilah gulir. Sebaliknya, ini menampilkan bilah gulir horizontal dan vertikal setelah kompilasi kode, tetapi pengguna hanya dapat memodifikasi dan menampilkan bilah gulir samping sesuai dengan persyaratan desain.
Kunjungi kode di bawah ini untuk menggunakan properti “overflow:scroll”:
< div >
< h3 > Contoh untuk Meluap: gulir h3 >
< div kelas = 'scrollingBox gulir' >
< P > Ini hanya konten tiruan yang digunakan untuk demonstrasi perbedaan antara scroll nilai properti overflow-y dan otomatis.
P >
div >
div >
Di blok kode di atas:
- Pertama, akar “ div ' elemen dibuat dan menggunakan yang bersarang ' ” tag di dalamnya.
- Selanjutnya, tetapkan kelas ' scrollingBox ' Dan ' menggulir ' ke yang sudah dibuat bersarang '
” tag.- Terakhir, berikan data dummy ke “ ' Dan ' ' tag di dalam ' div ” elemen.
Setelah pembuatan struktur HTML, terapkan properti CSS overflow:
< gaya >
.scrollingBox {
lebar: 300px;
tinggi: 150px;
batas: 1px abu-abu tua padat;
}
.menggulir {
luapan: gulir;
}
gaya >Deskripsi kode CSS di atas:
- Pertama, pilih “ scrollingBox ” kelas dan memberikan nilai-nilai “ 300px ”, “ 150px ' Dan ' 1px abu-abu gelap padat ' ke CSS ' lebar ”, “ tinggi ', Dan ' berbatasan ” properti. Properti ini digunakan untuk proses visualisasi yang lebih baik.
- Selanjutnya, “ menggulir ” kelas dipilih, dan nilai “ menggulir ” diteruskan ke CSS “ meluap ' Properti.
Setelah akhir fase kompilasi:
Output di atas menunjukkan bahwa konten tidak meluap tetapi bilah gulir telah ditambahkan pada sumbu X dan Y.
Contoh 2: Menggunakan properti overflow:auto
Overflow:auto properti seperti overflow:scroll karena keduanya dapat menampilkan scrollbar. Satu-satunya perbedaan adalah bahwa “ meluap: otomatis ” menambahkan bilah gulir saat konten meluap dan jika konten tidak meluap maka bilah gulir tidak ditambahkan. Ini sebagian besar digunakan saat pembuatan desain web responsif karena sifatnya yang berubah secara dinamis.
Misalnya, kunjungi kode di bawah ini:
< div kelas = 'contoh otomatis' >
< h3 > Contoh untuk Meluap: otomatis h3 >
< div kelas = 'kotak bergulir' gaya = 'meluap: otomatis' >
< P > Ini hanya konten tiruan yang digunakan untuk demonstrasi perbedaan antara scroll nilai properti overflow-y dan otomatis.
P >
div >
div >Di blok kode di atas:
- Pertama, struktur HTML yang sama digunakan, dan data dummy disediakan untuk “ h3 ', Dan ' P ” elemen diubah.
- Selanjutnya, “ gaya ” atribut digunakan dengan bagian dalam bersarang “ div ” elemen dan menetapkan nilai “ mobil ' ke CSS ' meluap ' Properti.
Setelah eksekusi, “ div ” elemen sekarang muncul seperti ini:
Snapshot di atas menunjukkan scrollbar tidak ditambahkan sesuai dengan panjang konten.
Sekarang, hanya untuk sedikit lebih banyak izin tentang ' meluap: otomatis ' Properti. Coba berikan data dalam jumlah besar ke “bersarang” div ” elemen. Setelah memperbarui kode, halaman web terlihat seperti ini:
Output mengonfirmasi bilah gulir sekarang ditambahkan karena adanya konten luapan.
Kesimpulan
“ meluap: gulir ' Dan ' meluap: otomatis ” properti berbeda dalam situasi di mana mereka menambahkan bilah gulir. The 'overflow:scroll' selalu menampilkan scrollbar apakah kontennya meluap atau tidak. Sedangkan 'overflow:auto' hanya menampilkan scrollbar saat konten elemen HTML yang dipilih meluap. Nilai CSS “ meluap ” tergantung pada desain spesifik dan persyaratan pengalaman pengguna. Artikel ini telah menunjukkan perbedaan antara properti 'overflow:scroll' dan 'overflow:auto'.
- Selanjutnya, tetapkan kelas ' scrollingBox ' Dan ' menggulir ' ke yang sudah dibuat bersarang '