JSFiddle - React, Tailwind, and code Playground

by pedromendessk

HTML

<link rel="stylesheet" href="https://manos.malihu.gr/repository/custom-scrollbar/demo/jquery.mCustomScrollbar.css">
<script src="https://manos.malihu.gr/repository/custom-scrollbar/demo/jquery.mCustomScrollbar.concat.min.js"></script>
<h1>jQuery custom content scroller fiddle</h1>

<div id="scroller1" class="scroller">
    <div class="content">
    </div>
</div>

<div id="scroller2" class="scroller">
    <div class="content">
    </div>
</div>

CSS

.scroller {
    height: 150px;
    width: 130px;
    overflow-y: auto;
    border: 2px solid #ccc;
    background: rgba(85, 85, 85, 0.77);
    float: left;
    margin: 10px;
}

.content {
    margin: 20px;
    height: 270px;
    width: 30px;
    border: 1px solid red;
}

JavaScript

$(function() {
    $("#scroller1").mCustomScrollbar();
    
    $("#scroller2").mCustomScrollbar({
					theme:"rounded-dots",
					scrollInertia:400
				});
    

});