Cara Menggunakan Plugin Scollbar jQuery
Assalamu’alaikum warahmatullahi wabarakatuh
Halo dumenity, selamat datang kembali di blog tips dan trik Source Code Aplikasi. Berjumpa kembali dengan saya di pembahasan tips seputar dunia blog, di kesempatan kali ini saya akan memberikan tips mengenai Cara Menggunakan Plugin Scollbar jQuery. Di artikel kali ini langkah awalnya yakni membangun guna scroll nya terlebih dahulu baru berikutnya kita berikan pluginnya, tentu kita akan bertanya – tanya bagi apa sih plugin ini..?? Ya, plugin scroll bar ini dapat kita gunakan bagi kustom scroll default di browser. Biasanya ini digunakan di web aplication, misalnya whatsapp web, atau mungkin fitur chat lainnya agar terlihat lebih menarik di banding scrollbar default dari browser.
Ini lah default scrollbar browser
Kemudian kita akan membuatnya terlebih dahulu, teman – teman ketikkan script di bawah ini
<!DOCTYPE html>
<html>
<head>
<title>Cara Menggunakan Plugin Scollbar jQuery</title>
</head>
<body>
<div class=container>
<div class=left>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
</div>
</div>
</body>
</html>
Save dengan nama index.html, kemudian berikan css nya
*{padding: 0; margin: 0;}
.container{width: 900px; margin: auto; height: 200px; background-color: gray;}
.left{padding-right: 0; height: 200px; overflow: auto;}Apabila telah save dan coba buka di browsernya, dan hasilnya seperti gambar di bawah ini
Berikutnya kita pasang pluginnya, teman – teman dapat download pluginnya di link ini
kemudian load di pada file nya di setiap file nya
<link rel=stylesheet href=jquery.mCustomScrollbar.css>
Letakkan css pluginnya di pada tag head, load pun library jQuery nya diikuti load plugin scrollbar nya
<script src=https://code.jquery.com/jquery-3.3.1.min.js></script>
<script src=jquery.mCustomScrollbar.concat.min.js></script>
Kemudian tambahkan class mCustomScrollbar di samping class left
Dan terakhir berikkan script jQuery nya
(function($){
$(window).on(load,function(){
$(.content).mCustomScrollbar();
});
})(jQuery);Apabila telah save dan refresh di browsernya, karenanya hasilnya seperti gambar di bawah ini.
Dapat teman – teman perhatikan di scrollbar telah di modifikasi oleh plugin yang telah kita pasangm dan terlihat lebih menarik. Nah demikianlah tips dari saya mengenai Cara Menggunakan Plugin Scollbar jQuery kita jumpa kembali di artikel yang akan datang. Terimakasih dan hingga jumpa.
Assalamu’alaikum warahmatullahi wabarakatuh
Sumber https://kursuswebsite.org
