- Daftar
- 4 Oct 1988
- Post
- ×
- Like diterima
- 9.136
[hide]LINK DEMO
Langkah 1
Importlah jQuery, jQuery UI dan plugin SlimScroll ke dokumen web Anda. Misal :
Langkah 2
Selanjutnya, buatlah elemen/konten yang nantinya akan ditampilkan scroll bar. Contoh :
Langkah 3
Terakhir, tuliskan perintah jQuery untuk menjalankan fungsi scroll bar.
Contoh diatas masih dalam bentuk yang sederhana. Anda dapat berkreasi lebih lanjut dengan plugin SlimScroll ini.
DOWNLOAD SLIMSCROLL : https://github.com/rochal/jQuery-slimScroll/
[/hide]
Langkah 1
Importlah jQuery, jQuery UI dan plugin SlimScroll ke dokumen web Anda. Misal :
Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.slimscroll.js"></script>
Langkah 2
Selanjutnya, buatlah elemen/konten yang nantinya akan ditampilkan scroll bar. Contoh :
Code:
<div id="teks" style="padding:5px;text-align:justify;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam sem, imperdiet at mollis vestibulum, bibendum id purus. Aliquam molestie, leo sed molestie condimentum, massa enim lobortis massa, in vulputate diam lorem quis justo. Nullam nec dignissim mi. In non varius nibh. Proin et eros nisi, eu vulputate libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ultricies augue id risus dapibus blandit.</p>
</div>
Langkah 3
Terakhir, tuliskan perintah jQuery untuk menjalankan fungsi scroll bar.
Code:
$(document).ready(function() {
$('#areaScroll').slimscroll({
width: '600px',
height: '100px',
alwaysVisible: true
});
});
Contoh diatas masih dalam bentuk yang sederhana. Anda dapat berkreasi lebih lanjut dengan plugin SlimScroll ini.
DOWNLOAD SLIMSCROLL : https://github.com/rochal/jQuery-slimScroll/
[/hide]