Agen Terpercaya   Advertise
 
 
 
Pasang iklan, hanya lewat Contact Us.
Waspada penipuan iklan. Klik di sini untuk melihat daftar penipu.

Scroll Bar dengan jQuery

RayMantic

Moderator
Staff member
Moderator
Daftar
4 Oct 1988
Post
×
Like diterima
9.211
Bimabet
[hide]LINK DEMO

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]
 
Jav Toys
Gaple Online Indonesia
Pasang iklan hanya lewat CONTACT US
Back
Top
We are now part of LS Media Ltd