Cara Menggunakan Value CSS Scrollbars

Hallo sahabat dumenity berjumpa lagi dalam tutorialÂ kursuswebdesign,Â pada tutorial kali ini saya akan membahas tentangÂ Cara Menggunakan Value CSS Scrollbars . CSS Scrollbars ini sangat berfungsi sekali ketikaÂ ada kasus, ketika konten elemen HTML mungkin lebih besar dari pada jumlah ruang yang dialokasikan. Misalnya, properti dengan lebar dan tinggi tidak memungkinkan ruang yang cukup untuk menampung isi elemen.

CSS menyediakan properti yang disebut overflow yang memberitahukan browser apa yang harus dilakukan jika isi kotak lebih besar dari pada kotak itu sendiri. Properti ini dapat mengambil salah satu dari nilai di bawah ini:

visible : Memungkinkan sebuah konten keluar dari batas elemen yang terkait.
hidden : Membatasi konten terhadap elemen HTMl yang terkait dan tidak ada scrollbar yang terlihat.
scroll : Ukuran elemen yang terkait tidak berubah, namun scrollbar ditambahkan agar pengguna dapat menggulir untuk melihat kontennya.
auto : Tujuannya sama dengan scroll, tapi scrollbar akan ditampilkan hanya jika konten tidak melimpah.

Oke untuk lebih jelasnya di bawah ini saya akan memberikan contoh dari Cara Menggunakan Value CSS Scrollbars. Di sini saya akan memberikan dua nilai yaitu nilai scroll dan auto.Â Langkah pertama buatlah sebuah file bernama

scrollbar.html

Kalau sudah silahkan salin script di bawah ini –

<html>
   <head>
   </head>
   
      <style type="text/css">
         .scroll{
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto{
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
      
   <body>
   
      <p>Contoh nilai scroll :</p>
      <div class="scroll">
      I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an 
      element box. This provides your horizontal as well as vertical scrollbars.
      </div>
      <br />
      
      <p>Contoh nilai auto :</p>
      
      <div class="auto">
      I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. 
      This provides your horizontal as well as vertical scrollbars.
      </div>
      
   </body>
</html>

<html>

<head>

</head>

.scroll{

display:block;

border: 1px solid red;

padding:5px;

margin-top:5px;

width:300px;

height:50px;

overflow:scroll;

}

.auto{

display:block;

border: 1px solid red;

padding:5px;

margin-top:5px;

width:300px;

height:50px;

overflow:auto;

}

</style>

<body>

<p>Contoh nilai scroll :</p>

I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an

element box. This provides your horizontal as well as vertical scrollbars.

</div>

<br />

<p>Contoh nilai auto :</p>

I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box.

This provides your horizontal as well as vertical scrollbars.

</div>

</body>

</html>

Oke kalau sudah silahkan teman – teman save dan jalankan pada browsernya, kurang lebih hasilnya seperti di bawah ini –

Untuk lebih jelasnya silahkan teman – teman coba sendiri dan jalankan pada browsernya. Oke itulah tadi pembahsan saya tentang Cara Menggunakan Value CSS Scrollbars semoga bermanfaat.

Facebook DUMET School

Categories