Ketika memperhatikan text box atau text area dan sejenisnya yang menggunakan overflow auto untuk menciptakan scroll bar, ada sedikit yang menurut saya kurang bagus yaitu ketika kita scroll ke atas atau ke bawah maka elemen yang ada di dalamnya akan menyentuh tepi atas atau tepi bawahnya.
Walaupun kita menambahkan padding pada box-nya untuk mengatur jarak tepi dengan elemen dalamnya, hal ini tidak berfungsi ketika scroll-nya dijalankan. Begitu pun dengan menambahkan margin pada elemen dalamnya, ketika kita melakukan scroll maka elemen dalamnya akan tetap terlihat menyentuk tepi atas atau tepi bawahnya.
Untuk itu kini saya mencoba untuk memanipulasi text box dengan scroll bar atau yang menggunakan overflow auto, agar ketika di-scroll maka elemen dalamnya tidak terlihat menyentuh garis tepi atas atau bawah seperti pada animasi gif di bawah ini.
Dari animasi di atas terlihat, walaupun element dalam di-scroll tetapi tetap pada tepi atas dan bawah box-nya memiliki jarak pada elemen yang ada di dalamnya.
Sebagai contoh mari kita lihat pada text box di bawah ini dengan CSS seperti berikut ini
.box-text{margin:0 auto;width:500px;height:200px;padding:10px;border:1px solid #666;text-align:left;overflow: auto;}Dengan HTML seperti di bawah ini.
<div class="box-text">
Enter some content here.
</div>
Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana.
Untuk memanipulasi text box di atas, kita akan membuat elemen baru diluar box-nya dengan menghilangkan border pada text boxnya sehingga elemen barunya seolah-olah menjadi boxnya. Kode CSS-nya seperti di bawah ini dan silahkan bandingkan dengan text box yang di atas.
Dan HTML-nya seperti di bawah ini
.boxout-text{margin:10px auto;width:500px;height:200px;padding:10px 0;border:1px solid #777;text-align:left;background:#fff;box-shadow:1px 1px 3px 0 #666}
.box-text{margin:0 0 0 10px;width:auto;height:200px;padding-right:10px;border:none;text-align:left;overflow: auto;}<div class="boxout-text">
<div class="box-text">
Enter some content here.
</div>
</div>
Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman bantuan Blogger, saya menemukan hal menarik di sana.
Dengan manipulasi tersebut maka ketika di-scroll, box seolah-olah akan tetap memiliki jarak antara tepi atas atau bawah dengan elemen dalamnya