Selamat siang pembaca setia haniif.com, pada tutorial HTML dan CSS ini saya akan berbagi tutorial cara membuat scroll pada tag div dengan HTML dan CSS.

Biasanya scroll akan muncul pada sebuah browser ketika halaman website melebihi ukuran monitor komputer atau PC, baik itu tingginya ataupun lebarnya. Akan tetapi kita juga dapat membuat scroll meskipun halaman website tidak melebihi tinggi atau lebar monitor komputer atau PC. Salah satu contohnya kita dapat membuat scroll pada tag div.

Manfaat dengan membuat scroll pada tag div ini adalah untuk menghemat space pada halaman website.

Berikut ini adalah cara membuat scroll pada tag div dengan HTML dan CSS.

  1. Buka editor di komputer atau PC Anda. Kemudian ketikan tag HTML dan sintak CSS di bawah ini.
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Cara Mudah Membuat Scroll pada Tag Div dengan HTML dan CSS</title>
    	<style type="text/css">
    	  div {
    	    background-color: #F0F0F0;
    	    width: 400px;
    	    height: 400px;
    	    padding: 5px;
    	    overflow: scroll;
    	  }
    	</style>
      </head>
      <body>
        <div>
          <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>
          <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>
          <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>

    Keterangan:

    • Sintak CSS yang paling penting di atas adalah overflow: scroll; dan height: 400px. Ketika isi yang berada di dalam tag div ini tingginya melebihi 400px, maka scroll akan muncul.
  2. Kemudian simpan dengan nama file ‘cara_membuat_scroll.html’ di drive D:\ atau drive lainnya.
  3. Untuk melihat hasilnya, silahkan klik kanan pada file tersebut, pilih open with dan pilih browser yang akan Anda gunakan. Tampilannya akan seperti gambar di bawah ini.

    Cara Membuat Scroll pada Tag Div dengan HTML dan CSS

Artikel terkait: Cara Menampilkan Audio Menggunakan HTML5

Itulah cara mudah membuat scroll pada tag div dengan HTML dan CSS. Semoga bermanfaat. :)