Hallo teman-teman, Alhamdulilah Bertemu kembali dengan saya ditahun 2017 dan masih diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website terutama dalam hal desain website.
Pada Kesempatan kali ini saya akan membahas tentang Cara Menghilangkan Horizontal Scroll dengan CSS. Secara default sebuah website, jika kita memiliki content atau paragraph yang panjang atau banyak dan belum kita tentukan width atau lebar ukurannya maka secara otomatis browser akan menampilkan sebuah horizontal scrolling agar pengguna dapat membaca paragraph yang terpotong kesamping.
Oke untuk lebih jelasnya mari kita mulai mempraktekannya Cara Menghilangkan Horizontal Scroll dengan CSS. pertama-tama teman-teman buat terlebih dahulu sebuah folder dengan nama bebas dan nantinya kita masukan file-file html dan css didalam folder tsb.
Jika sudah langkah selanjutnya silahkan teman-teman buka text-editor yang teman-teman gunakan. Disini kebetulan saya menggunakan sublime-text. Lalu kemudian teman-teman ketikan atau copy script HTML dibawah ini :
<html>
<head>
<meta charset="utf-8">
<title>Menghilangkan Horizontal Scroll</title>
</head>
<body>
<div class="paragraph">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</body>
</html>
Jika sudah silahkan teman-teman simpan dengan nama terserah teman-teman dan jangan lupa formatnya adalah .html , lalu langkah selanjutnya teman-teman jalankan/run dibrowser yang teman-teman gunakan jika berhasil maka hasilnya akan seperti dibawah ini :
Perhatikan ya teman-teman pada gambar diatas masih terlihat (ada) horizontal scrollingnya. Lalu bagaimana cara menghilangkannya ? oke teman-teman, caranya cukup mudah sekali. Teman-teman hanya tinggal ketik atau copy script CSS dibawah ini dan letakan diantara tag head HTML atau lebih tepatnya kita menggunakan CSS internal :
<style>
/* script menghilangkan Horizontal Scroll */
html, body {
max-width: 100%;
overflow-x: hidden;
}
.paragraph {
width: 150%;
}
</style>
Jika sudah simpan, lalu silahkan teman-teman refresh kembali browsernya maka hasilnya akan seperti pada gambar dibawah ini :
Bagaimana teman-teman ? sudah hilangkan horizontal scroll nya ? hehe jadi kurang lebihnya seperti itulah Cara Menghilangkan Horizontal Scroll dengan CSS. Dan teman-teman tidak usah bingung lagi jika ingin menghilangkan horizontal scroll yang mengganggu pada website teman-teman.
Oke kalau begitu cukup sampai disini dahulu pembahasan saya tentang Cara Menghilangkan Horizontal Scroll dengan CSS. Semoga dapat bermanfaat buat teman-teman dan sampai bertemu di pembahasan selanjutnya.
Terimakasih