JSFiddle - React, Tailwind, and code Playground

by Manan Patel

HTML

<link rel="stylesheet" href="http://www.jqueryscript.net/demo/jQuery-Custom-Scrollbar-Plugin-malihu/jquery.mCustomScrollbar.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://www.jqueryscript.net/demo/jQuery-Custom-Scrollbar-Plugin-malihu/jquery.mousewheel.min.js"></script>
<script src="http://www.jqueryscript.net/demo/jQuery-Custom-Scrollbar-Plugin-malihu/jquery.mCustomScrollbar.js"></script>
<a href="javascript:;" id="add">Add active class</a>
 | 
<a href="javascript:;" id="scroll">Scroll to active class</a>

<div id="content_1" class="content">
    <p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
    <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti.</p>
    <p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat.</p>
    <p>Cras venenatis condimentum nibh a mollis. Duis id sapien nibh. Vivamus porttitor, felis quis blandit tincidunt, erat magna scelerisque urna, a faucibus erat nisl eget nisl. Aliquam consequat turpis id velit egestas a posuere orci semper. Mauris suscipit erat quis urna adipiscing ultricies. In hac habitasse platea dictumst. Nulla scelerisque lorem quis dui sagittis egestas.</p>
    <p>Etiam sed massa felis, aliquam pellentesque est.</p>
    <p>Nam eu arcu at purus tincidunt pharetra ultrices at ipsum. Mauris urna nunc, vulputate quis gravida in, pharetra id mauris. Ut sit amet mi dictum nulla lobortis adipiscing quis a nulla. Etiam diam ante, imperdiet vel scelerisque eget, venenatis non eros. Praesent ipsum sem,...

CSS

body {
    margin:0;
    padding:0;
    color:#eee;
    background:#222;
    font-family:Verdana, Geneva, sans-serif;
    font-size:13px;
    line-height:20px;
}
a:link, a:visited, a:hover {
    color:#fff;
}
h1 {
    font-family:Georgia, serif;
    font-size:19px;
    font-style:italic;
    margin:20px 40px 0 40px;
    color:#09C;
}
p {
    margin:0 0 20px 0;
}
hr {
    height:0;
    border:none;
    border-bottom:1px solid rgba(255, 255, 255, 0.2);
    border-top:1px solid rgba(0, 0, 0, 0.9);
    margin:20px 10px;
    clear:both;
}
.links {
    margin:10px 0 0 10px;
}
.links a {
    display:inline-block;
    padding:2px 10px;
    margin:10px;
    background:#C30;
    text-decoration:none;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    border-radius:15px;
}
.links a:hover {
    background:#de4816;
}
.content {
    margin:40px;
    width:260px;
    height:500px;
    padding:20px;
    overflow:auto;
    background:#333;
}
.content p:nth-child(even) {
    color:#999;
    font-family:Georgia, serif;
    font-size:17px;
    font-style:italic;
}
.content p:nth-child(3n+0) {
    color:#c96;
}

JavaScript

$( "#add" ).click(function() {
    $('#content_1').find('p:last').addClass('active');
});

$( "#scroll" ).click(function() {
    $("#content_1").mCustomScrollbar('scrollTo', $('.active').position().top);
});

$("#content_1").mCustomScrollbar({
    scrollButtons: {
        enable: true
    }
});