Hallo teman-teman, berjumpa lagi dengan saya pada tutorial Dumet Schol. Di artikel kali ini saya akan memberikan tips tentang Cara Menggunakan Fungsi overflow-x pada css dimana pada fungsi ini kita bisa membuat scroll pada layout. Nah pada tips dan trik kali ini kita akan membuat sebuah layout dimana tampilan tersebut seperti kita membaca koran digital dengan menggunakan fungsi overflow-x, di bawah ini adalah contoh layout yang saya ambil dari http://epaper.kompas.com/kompas/

Cara Menggunakan Fungsi overflow-x pada css

Bisa kalian lihat pada gambar di atas ini terdapat scroll untuk membaca berita, di latihan kali ini kita juga akan membuat mirip seperti gambar di atas. Biar tidak penasaran teman-teman bisa lihat gambar di bawah ini yang nanti kita akan buat

Cara Menggunakan Fungsi overflow-x pada css

Hampir mirip layout punya kompas hanya content nya saja yang berbeda, oke langsung saja kita praktekkan Cara Menggunakan Fungsi overflow-x pada css. Seperti biasa teman-teman siapkanĀ  text editornya dan copy script html nya di bawah ini

Kemudian save dengan nama index.html, lalu jalankan pada browser nya. Maka akan menghasilkan output seperti gambar di bawah ini

Cara Menggunakan Fungsi overflow-x pada css

Langkah berikutnya kita tambahkan style css nya untuk menghasilkan layout yang kita akan buat, teman-teman copy script css nya di bawah ini

Jika sudah save dan refresh pada browser nya, maka akan menghasilkan seperti gambar di bawah ini

Cara Menggunakan Fungsi overflow-x pada css

Seperti yang teman-teman lihat pada gambar di atas ini, content keluar melebihi pembungkus nya. Saat nya kita gunakan overflow-x:hidden supaya content di hidden dan muncul scroll nya, teman-teman tambahkan pada css nya

Cara Menggunakan Fungsi overflow-x pada css

Kemudian save dan refresh pada browser nya, maka layout yang kita buat sudah berhasil.

Untuk melihat demo nya klik disini

Baik, sekian dulu pada artikel kali ini tentang Cara Menggunakan Fungsi overflow-x pada css, kita berjumpa lagi pada artikel yang akan datang. Semoga bermanfaat dan bisa menjadi refrensi untuk teman-teman seputar html dan css. Terima Kasih dan Sampai Jumpa.

Indah nya berbagi ilmu šŸ™‚