Assalamu’alaikum warahmatullahi wabarakatuh
Halo dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips seputar dunia website, pada kesempatan kali ini saya akan memberikan tips tentang Cara Menggunakan Plugin Scollbar jQuery. Di artikel kali ini langkah awalnya adalah membuat fungsi scroll nya terlebih dahulu baru selanjutnya kita berikan pluginnya, tentu kita akan bertanya – tanya untuk apa sih plugin ini..?? Ya, plugin scroll bar ini dapat kita gunakan untuk custom scroll default pada browser. Biasanya ini digunakan pada 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;}
Jika sudah save dan coba buka pada browsernya, dan hasilnya seperti gambar di bawah ini
Selanjutnya kita pasang pluginnya, teman – teman bisa download pluginnya di link ini
kemudian load di dalam file nya pada setiap file nya
<link rel="stylesheet" href="jquery.mCustomScrollbar.css">
Letakkan css pluginnya di dalam tag head, load juga 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);
Jika sudah save dan refresh pada browsernya, maka hasilnya seperti gambar di bawah ini.
Bisa teman – teman perhatikan pada scrollbar sudah di modifikasi oleh plugin yang sudah kita pasangm dan terlihat lebih menarik. Nah itulah tips dari saya tentang Cara Menggunakan Plugin Scollbar jQuery kita jumpa kembali pada artikel yang akan datang. Terimakasih dan sampai jumpa.
Assalamu’alaikum warahmatullahi wabarakatuh
The post Cara Menggunakan Plugin Scollbar jQuery appeared first on Kursus Website Terbaik.