Halo sobat coding rakitan, dimanapun kalian berada. Kali ini kita akan belajar bagaimana cara membuat sebuah scroll pada halamanselalu berada di bawah. Cara ini juga saya temukan ketika membuat sebuah aplikasi Web untuk chatingan. Jadi intinya dalam aplikasi yang saya buat itu ketika pesan dikirim dan bertambah ke tampilan pesan maka scroll akan langsung berada di bawah.
Untuk lebih jelas tentang aplikasi yang sudah saya buat itu bisa anda lihat gambarnya seperti dibawah.
Agar dapat membuat scroll bar selalu di bwah seperti di atas anda perlu menggunakan bantuan jquery, sebuah library java script yang sangat memudahkan dalam penggunaan javascript. Jquery membuat perintah-perintah umum dalam javascript menjadi lebih singkat sehingga script javascript kita menjadi lebih pendek.
Berikut perintah untuk membuat scroll selalu di bawah.
$('#pesan').scrollTop($('#pesan')[0].scrollHeight);
Ganti id '#pesan' sesuai dengan id elemen dimana tempat scroll bar kalian berada. Sebagai contoh anda bisa melihat di bawah ini penggunaanya.
- isi 1
- isi 2
- isi 3
- isi 4
- isi 5
- isi 6
- isi 7
- isi 8
- isi 9
- isi 10
- isi 11
- isi 12
- isi 13
- isi 14
Coding
<!DOCTYPE html>
<html>
<head>
<title>Coding Rakitan</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.s{
width: 100%;
height: 200px;
background: #6fc1ad;
padding: 10px;
}.scroll{
background: white;
width: 90%;
height: 90%;
overflow: auto;
font-size: 20px;
padding: 5px;
}
</style>
</head>
<body>
<div class="s">
<div class="scroll" id="scroll">
<ul>
<li>isi 1</li>
<li>isi 2</li>
<li>isi 3</li>
<li>isi 4</li>
<li>isi 5</li>
<li>isi 6</li>
<li>isi 7</li>
<li>isi 8</li>
<li>isi 9</li>
<li>isi 10</li>
<li>isi 11</li>
<li>isi 12</li>
<li>isi 13</li>
<li>isi 14</li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#scroll').scrollTop($('#scroll')[0].scrollHeight);
</script>
</body>
</html>
<html>
<head>
<title>Coding Rakitan</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.s{
width: 100%;
height: 200px;
background: #6fc1ad;
padding: 10px;
}.scroll{
background: white;
width: 90%;
height: 90%;
overflow: auto;
font-size: 20px;
padding: 5px;
}
</style>
</head>
<body>
<div class="s">
<div class="scroll" id="scroll">
<ul>
<li>isi 1</li>
<li>isi 2</li>
<li>isi 3</li>
<li>isi 4</li>
<li>isi 5</li>
<li>isi 6</li>
<li>isi 7</li>
<li>isi 8</li>
<li>isi 9</li>
<li>isi 10</li>
<li>isi 11</li>
<li>isi 12</li>
<li>isi 13</li>
<li>isi 14</li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#scroll').scrollTop($('#scroll')[0].scrollHeight);
</script>
</body>
</html>
Demikian pembelajaran kali ini semoga sukses selalu. Dan bila ada yang kurang jelas atau belum di pahami silahkan tinggalkan pertanyaan di kolom komentar. Terima kasih.
agar pesannya ada dalam kotak warna hijau itu gimana kak
ReplyDelete