Artikel ini mendemonstrasikan penggunaan properti CSS overflow-y dengan banyak contoh.
Bagaimana Cara Menggunakan Properti Overflow-y di CSS?
CSS “ luapan-y ” properti digunakan untuk mengontrol luapan konten di sepanjang sumbu silang dalam suatu elemen. Ini menentukan apakah akan memotong konten atau menambahkan scrollbar saat konten melebihi tinggi wadah. Nilai yang mungkin untuk properti ini adalah “ bisa dilihat ”, “ tersembunyi ”, “ menggulir ', Dan ' mobil ”.
Mari kita kunjungi contoh di bawah ini untuk demonstrasi properti overflow-y yang lebih baik:
Contoh 1: Menggunakan Visible sebagai Nilai Untuk Properti Overflow-y
“ bisa dilihat ” Nilai memungkinkan konten meluap dari wadah dan tidak menambahkan kliping atau bilah gulir apa pun. Kunjungi blok kode praktis di bawah ini:
>
>
>
Deskripsi blok kode di atas:
- Pertama, beri nilai “ induk ' ke ' kelas ” atribut dan gunakan “ gaya ” atribut.
- Selain itu, berikan nilai “ bisa dilihat ' ke CSS ' luapan-y ' Properti. Dan atur sama dengan “ gaya ” untuk membuat gaya CSS berfungsi.
- Selanjutnya, buat ' bersarang ' div ” elemen dan tetapkan kelas “ konten anak ”. Juga, berikan data tiruan untuk itu.
Sekarang, manfaatkan properti CSS untuk menyempurnakan visualisasi yang membantu dalam pemahaman yang lebih baik tentang properti CSS overflow-y:
.induk {lebar : 200px ;
tinggi : 150px ;
berbatasan : 1px padat hitam ;
}
.childContent {
tinggi : 300px ;
warna latar belakang : biru muda ;
}
Deskripsi properti CSS diberikan di bawah ini:
- Pertama, “ induk ” kelas dipilih dan nilai dari “ 200px ”, “ 150px ', Dan ' 1px hitam pekat ” ditugaskan ke CSS “ lebar ”, “ tinggi ', Dan ' berbatasan ” properti, masing-masing.
- Selanjutnya, pilih “ konten anak ' kelas dan atur nilai ' 300px ' Dan ' biru muda ' ke CSS ' tinggi ' Dan ' warna latar belakang ” properti, masing-masing. Kelas ini diperluas ke “ induk ” kelas yang dikontrol oleh CSS “ meluap ' Properti.
Setelah kompilasi potongan kode, halaman web muncul seperti ini:
Cuplikan menampilkan konten luapan sekarang telah terlihat dan bilah gulir atau kliping tidak ditambahkan secara default.
Contoh 2: Menggunakan Hidden sebagai Nilai Untuk Properti Overflow-y
“ luapan-y properti ” dengan nilai “ tersembunyi ” menyembunyikan semua konten yang bergerak di luar penampung induknya. Properti ini tidak menambahkan bilah gulir, melainkan memotong konten yang meluap:
>
>
Cuplikan kode di atas berisi:
- Pertama, kode yang sama disisipkan lagi dengan penambahan konten dummy yang ditempatkan di dalam elemen div bagian dalam.
- Selanjutnya ubah nilai “ luapan-y ” properti ke “ tersembunyi ' ke ' ” tag memiliki kelas “ induk ”.
Setelah merender ulang halaman web terlihat seperti ini:
Snapshot menampilkan bahwa konten luapan telah dipotong.
Contoh 3: Menggunakan Scroll sebagai Nilai Untuk Properti Overflow-y
Menetapkan nilai “ luapan-y properti ” ke “ menggulir ” memungkinkan pengguna akhir untuk menelusuri
konten yang meluap itu. Mari kita kunjungi blok kode di bawah ini:
= 'induk' gaya = 'meluap-y: gulir;' >
= 'Konten Anak' > Ini hanya boneka isi digunakan untuk mendemonstrasikan properti overflow-y saat diatur ke terlihat. Ini hanya boneka isi digunakan untuk mendemonstrasikan properti overflow-y saat diatur ke terlihat.
>
>Di blok kode di atas:
- Pertama, struktur HTML yang sama telah disisipkan di dalam “
” tag. - Selanjutnya ubah nilai “ luapan-y properti ” ke “ menggulir ”. Ini memungkinkan ' induk ” div untuk mengaktifkan efek gulir untuk mengontrol konten yang meluap.
Setelah kompilasi blok kode di atas, halaman web muncul seperti ini:
Gid di atas mengilustrasikan bahwa efek gulir telah tersedia untuk mengontrol konten yang meluap.
Contoh 4: Menggunakan Auto sebagai Nilai Untuk Properti Overflow-y
Dalam contoh ini, pengguna dapat menambahkan bilah gulir hanya jika konten tidak sesuai dengan penampung. Selain itu, jika konten tidak meluap, scrollbar tidak akan ditambahkan. Hal ini dimungkinkan dengan memberikan nilai “ mobil ' ke CSS ' luapan-y ' Properti:
= 'induk' gaya = 'meluap-y: otomatis;' >
= 'Konten Anak' > Ini hanya boneka isi digunakan untuk mendemonstrasikan properti overflow-y saat diatur ke terlihat. Ini hanya boneka isi digunakan untuk mendemonstrasikan properti overflow-y saat diatur ke terlihat.
>
>Di blok kode di atas:
- Pertama, masukkan file HTML yang sama di dalam “
” tag. - Selanjutnya, perbarui nilai “ luapan-y ” properti ke “ mobil ”. Ini memungkinkan efek pengguliran relatif terhadap panjang vertikal konten.
Setelah proses kompilasi berakhir, halaman web berfungsi seperti ini:
Gif di atas menampilkan properti overflow yang mengaktifkan scrollbar sesuai dengan panjang konten.
Kesimpulan
CSS “ luapan-y ” properti digunakan untuk mengontrol konten yang meluap di sepanjang sumbu silang dalam suatu elemen. Properti overflow-y mengontrol konten sesuai dengan nilai spesifik yang diberikan ke properti overflow-y. “ visual ” nilai menampilkan konten yang meluap, nilai “ tersembunyi ” nilai menyembunyikan konten luapan, dan “ menggulir ” nilai menambahkan bilah gulir untuk mengontrol konten. Dan jika nilainya “ mobil ” bilah gulir menambah atau menghapus sesuai dengan panjang konten.
- Pertama, struktur HTML yang sama telah disisipkan di dalam “