Menggunakan (overflow:scroll) dengan HTML dan CSS

Hallo teman-teman, apa kabar..?? Pastinya baik selalu ya, dan terus bersemangat buat upgrade skill nya. Pada artikel kali ini saya akan memberikan tips tentang membuat design web dengan HTML dan CSS yaitu Menggunakan (overflow:scroll) dengan HTML dan CSS . Berikut gambar yang nanti kita akan buat

Menggunakan (overflow:scroll) dengan HTML dan CSS

Scroll tidak hanya bisa muncul ketika halaman website melebihi tinggi dari monitor saja, Tetapi scroll bisa juga digunakan dalam sebuah class/id meskipun tingginya tidak melebihi lebar monitor yaitu dengan menggunakan overflow:scroll. Biasanya banyak digunakan untuk chat komentar, tabel laporan, dll. Oke langsung saja teman-teman siapkan code editornya dan copy script di bawah ini

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	*{margin: 0; padding: 0}
		#kotak{width:400px; background:#d1c5af66; padding:10px; height:400px; margin:auto;}
	</style>
</head>
<body>
	<div id="kotak">
	    <p>
			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.
			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.
			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.
			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.
	    </p>
	</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

*{margin: 0; padding: 0}

#kotak{width:400px; background:#d1c5af66; padding:10px; height:400px; margin:auto;}

</style>

</head>

<body>

<p>

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.

</p>

</div>

</body>

</html>

Lalu pastekan script di atas ini di code editornya, jika sudah save dengan nama index.html dan run pada browsernya. Maka akan menghasilkan output seperti di bawah ini

Menggunakan (overflow:scroll) dengan HTML dan CSS

Nah seperti yang kalian lihat pada gambar di atas ini, belum mempunyai scroll height maupun width. Langkah berikutnya kita tambahkan overflow:scroll di id=”kotak” (#kotak) nya

Menggunakan (overflow:scroll) dengan HTML dan CSS

Kemudian save dan refreas pada browsernya

Pada gambar diatas ini menunjukkan scroll hanya ada posisi vertical nya saja, selanjutnya kita tinggal berikan scroll di posisi horizontal nya dengan cara memberikan lebar di tag <p> nya (“catatan” pemberian width atau lebar harus lebih lebar dari width yang diberikan di #kotak) supaya scroll horizontal nya muncul

Menggunakan (overflow:scroll) dengan HTML dan CSS

Lihat kotak yang saya beri warna coklat pada gambar di atas ini, saya berikan 600px, jika saya save dan refreas maka scroll berhasil di buat.

Menggunakan (overflow:scroll) dengan HTML dan CSS

Sangat mudah bukan, oke sekian dulu di artikel kali ini tentang Menggunakan (overflow:scroll) dengan HTML dan CSS sampai jumpa di artikel selanjutnya. Semoga bermanfaat dan bisa menjadi refreansi untuk upgrade skillnya dalam membuat layout website. Terimakasih

Indahnya berbagi 🙂

Baca juga artikel tentang Cara Membuat Button Tooltip Text dengan CSS3

Menggunakan (overflow:scroll) dengan HTML dan CSS

Facebook DUMET School

Categories