Memanipulasi Tepi Atas Bawah Text Box Overflow Auto

Ketika memperhatikan text box atau text area dan sejenisnya yang memakai overflow auto untuk membuat scroll bar, ada sedikit yang berdasarkan aku kurang anggun adalah saat 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 saat scroll-nya dijalankan. Begitu pun dengan menambahkan margin pada elemen dalamnya, saat kita melaksanakan scroll maka elemen dalamnya akan tetap terlihat menyentuk tepi atas atau tepi bawahnya.

Untuk itu sekarang aku mencoba untuk memanipulasi text box dengan scroll kafe atau yang memakai overflow auto, biar saat di-scroll maka elemen dalamnya tidak terlihat menyentuh garis tepi atas atau bawah menyerupai 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 mempunyai jarak pada elemen yang ada di dalamnya.

Sebagai teladan mari kita lihat pada text box di bawah ini dengan CSS menyerupai berikut ini

 .box-text{margin:0 auto;width:500px;height:200px;padding:10px;border:1px solid #666;text-align:left;overflow: auto;}

Dengan HTML menyerupai di bawah ini.

 <div class="box-text">
 Enter some content here.
 </div>

Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana.

Untuk memanipulasi text box di atas, kita akan membuat elemen gres diluar box-nya dengan menghilangkan border pada text boxnya sehingga elemen barunya seperti menjadi boxnya. Kode CSS-nya menyerupai di bawah ini dan silahkan bandingkan dengan text box yang di atas.

 .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;}

Dan HTML-nya menyerupai di bawah ini

 <div class="boxout-text">
     <div class="box-text">
 Enter some content here. 
 </div>
     </div>

Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana. Enter some content here. Lagi iseng-iseng menjelajahi halaman pemberian Blogger, aku menemukan hal menarik di sana.

Dengan manipulasi tersebut maka saat di-scroll, box seperti akan tetap mempunyai jarak antara tepi atas atau bawah dengan elemen dalamnya

Sumber https://www.kompiajaib.com/

Share this post