Halo sahabat serhamo, dimanapun kalian berada. Kali ini kita akan berguru bagaimana cara menciptakan sebuah scroll pada halamanselalu berada di bawah. Cara ini juga aku temukan saat menciptakan sebuah aplikasi Web untuk chatingan. Kaprikornus pada dasarnya dalam aplikasi yang aku buat itu saat pesan dikirim dan bertambah ke tampilan pesan maka scroll akan eksklusif berada di bawah.
Untuk lebih terang wacana aplikasi yang sudah aku buat itu sanggup anda lihat gambarnya menyerupai dibawah.
Agar sanggup menciptakan scroll kafetaria selalu di bwah menyerupai di atas anda perlu memakai santunan jquery, sebuah library java script yang sangat memudahkan dalam penggunaan javascript. Jquery menciptakan perintah-perintah umum dalam javascript menjadi lebih singkat sehingga script javascript kita menjadi lebih pendek.
Berikut perintah untuk menciptakan scroll selalu di bawah.
$('#pesan').scrollTop($('#pesan')[0].scrollHeight);
Ganti id '#pesan' sesuai dengan id elemen dimana daerah scroll kafetaria kalian berada. Sebagai teladan anda sanggup 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></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></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 biar sukses selalu. Dan kalau ada yang kurang terang atau belum di pahami silahkan tinggalkan pertanyaan di kolom komentar. Terima kasih.
Post a Comment