MENGATUR OVERFLOW WEBSITE PADA CSS

Properti overflow CSS adalah alat untuk mengelola bagaimana konten yang melampaui batas elemen akan ditampilkan. Values utama overflow: visible, hidden, scroll, dan auto.Overflow akan mengkontrol penuh dalam mengatasi masalah konten yang melampaui batas menggunakan style sesuai kebutuhan.

A. Values Pada OverFlow

Values dalam properti overflow CSS diantaranya:

• Visible: merupakan nilai default. Konten yang keluar dari elemen akan tetap terlihat dan mengganggu elemen lain di sekitarnya.
• Hidden: ketika menggunakan value hidden, bagian dari konten yang keluar akan terpotong dan tidak terlihat. Hal ini membantu menjaga layout halaman tetap rapi, tetapi audiens tidak akan bisa mengakses konten yang terpotong tersebut.
• Scroll: value ini menjadi solusi untuk dengan cara menambahkan scrollbar ke area yang mengalami overflow. Dengan scroll, audiens bisa menggulir untuk melihat seluruh konten.
• Auto: value auto secara otomatis menambahkan scrollbar hanya jika diperlukan, sehingga menjaga tampilan halaman tetap clean sambil memungkinkan akses ke konten yang melampaui batas.

B. Oferflow Visible

Properti overflow dengan value visible dalam CSS digunakan untuk menangani situasi di mana konten suatu elemen melebihi batas-batas elemen tersebut. Dengan menggunakan visible, konten yang melampaui batas akan tetap terlihat dan tidak terpotong, meskipun dapat mengganggu elemen lain di sekitarnya.

.div-container {
  width: 150px;
  height: 100px;
  border: 2px solid black;
  overflow: visible;
}

.div-container:hover p {
  position: relative;
  left: 160px;
}
<div class="div-container">
  <p>Ini adalah teks yang akan meluap dari kotak saat di-hover!</p>
</div>

C. Overflow Hidden

Properti overflow dengan value hidden dalam CSS berfungsi untuk mengatasi konten yang melampaui batas elemen. Dengan menetapkan value ini, semua konten yang melampaui batas elemen akan terpotong dan tidak terlihat oleh audiens. Hal ini bisa menjaga tampilan halaman tetap rapi dan terorganisasi.

Salah satu penggunaan umum dari overflow: hidden adalah membuat efek parallax pada halaman web

.parallax-container {
  position: relative;
  overflow: hidden;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('background.jpg') no-repeat center center fixed;
  background-size: cover;
  will-change: transform;
  transition: transform 0.5s ease-in-out;
}
<div class="parallax-container">
  <div class="background-image"></div>
</div>

D. Overflow Scroll

Properti overflow CSS dengan value scroll digunakan untuk menangani konten yang melebihi batas elemen dengan menambahkan scrollbar ke elemen. Dengan cara ini, audiens dapat men-scroll untuk melihat seluruh konten yang melampaui batas.

Penggunaan overflow: scroll sangat berguna untuk menampilkan sejumlah besar konten dalam ruang yang terbatas, seperti tabel data, daftar item, atau teks panjang. Sebagai contoh, kamu memiliki sebuah kotak atau div berisi list item

.div-container {
  width: 200px;
  height: 150px;
  border: 1px solid #ccc;
  overflow: scroll;
}
<div class="div-container">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
</div>

E. Overflow Auto

Properti overflow CSS dengan value auto bisa dikatakan lebih “cerdas” dibandingkan value lain. Jika konten di dalam elemen tidak melampaui batas, tampilan elemen akan tetap normal tanpa scrollbar. Namun, jika konten melampaui batas, browser secara otomatis menambahkan scrollbar ke elemen tersebut.

Contoh dalam membuat pop-up berisi teks informatif dan ingin memastikan teks tersebut bisa dibaca dengan mudah di berbagai ukuran layar maupun perangkat,

Dalam contoh di bawah ini, jika teks di dalam elemen dengan kelas .modal-content melebihi tinggi maksimum yang ditentukan, yaitu 400px, scrollbar akan muncul secara otomatis, memungkinkan audiens men-scroll dan membaca seluruh teks. Apabila teksnya pendek dan tidak melampaui batas, tidak akan ada scrollbar yang muncul.

.modal-content {
  width: 300px;
  max-height: 400px;
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #fff;
  overflow: auto;
}
<div class="modal-content">
  <p>Properti overflow CSS dengan value auto bisa dikatakan lebih “cerdas” dibandingkan value lain. Jika konten di dalam elemen tidak melampaui batas, tampilan elemen akan tetap normal tanpa scrollbar. Namun, jika konten melampaui batas, browser secara otomatis menambahkan scrollbar ke elemen tersebut.</p>
</div>