Untuk beberapa keadaan, ada saja yang ingin membuat scroll didalam kolom yang ada didalam body website. Misalnya karena terlalu panjang dan ingin terlihat lebih singkat tapi isinya tetap utuh dengan cara scroll untuk melihat isi tersebut. Pada post kali ini saya akan bagikan caranya yang paling mudah dan gak usah ribet karena hasilnya akan sama saja antara yang ribet dan yang simple ini.
Perlu diketahui dan dipahami terlebih dahulu logikanya, misalnya kalian mau membuat scroll pada div class satu yang isinya adalah div class dua maka kita akan tetapkan si div B sebagai pembungkus dan div A sebagai isinya. Begitulah, singkat dan simple, seperti yang sudah saya jelaskan pada artikel Cara Membuat Website 100% Responsive dengan Bootstrap Dari Nol Sampai Selesai.
Ini adalah contoh code yang akan saya buat scroll:
Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum.ang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum.ang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum.
Dan misalnya memiliki CSS awal seperti ini:
.satu {
max-width: 350px;
}
Beginilah terlihat pada browser: (lihat gambar).
Baca Juga:
Nah, sekarang tinggal diterapkan penjelasan yang tadi diatas soal Simple itu pada CSS nya.
Beginilah caranya. Silahkan terapkan tinggi yang diinginkan untuk PEMBUNGKUS, misalnya saya hanya ingin menampilkan tinggi nya 70vh; saja. Lalu silahkan terapkan pada kolom / div yang sebagai isi dari pembungkus tersebut dengan tinggi full yaitu 100%; dan jangan lupa terapkan overflow: auto; supaya dia memahami maksud dari tinggi yang diterapkan. Jadi, kodingan nya akan seperti ini:
.satu {
max-width: 350px;
height: 70vh;
}
.dua {
height: 100%;
overflow: auto;
}
Silahkan di reload browser nya dan lihat hasilnya, berhasil !
Saya contohkan dengan tinggi dari pembungkus hanya 70vh; sedangkan isi dari bungkus tersebut adalah full 100%, maka secara otomatis isi yang ada didalam bungkus tersebut akan lebih panjang. Makanya saya tambahkan overflow : auto; supaya isi tersebut memahami maksud dari pembungkus kenapa dia lebih pendek.
Masih bingung ? Lihat : Video tutorial cara membuat scroll di dalam kotak.
Untuk keperluan hal yang sama seperti ini, tinggal digunakan aja trik diatas ya. Buat pembungkus dan tentukan isinya. Pembungkus tidak lebih tinggi dari isi karena supaya isi bisa di scroll, begitulah kira-kira logikanya… Please keep in mind ! Pada kode yang digunakan diatas terdapat nilai CSS max-width untuk class satu, itu hanya contoh untuk tutorial ini saja karena supaya tidak terlalu lebar di browser dan supaya text / tulisan bisa menyusun kebawah.
Scroll didalam div ini juga dipraktekan di tutorial tentang cara membuat website responsive menggunakan framework Bootstrap part 7 / 10.
Selamat mencoba !