Simple Scroll Bars

by Michael Mandarino

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css">
<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.js"></script>
<h1>Simple Scroll Bars</h1>
<h2>Last Update: February 7th 2019 by Michael Mandarino</h2>
<br />
<a href="http://grsmto.github.io/simplebar/">Examples</a><br />
<a href="https://github.com/Grsmto/simplebar">Github</a>
<br /><br />

<div id="data-simplebar" data-simplebar>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at porttitor tortor. Proin ut sem volutpat leo scelerisque eleifend nec sit amet nisi. Ut sodales interdum nulla tincidunt blandit. Maecenas tincidunt viverra nulla vel facilisis. Morbi
    facilisis ex ut commodo ullamcorper. In viverra tincidunt eleifend. Aenean gravida lacus fermentum felis rhoncus maximus. Integer at eleifend augue. Nam sagittis mi vel libero tristique, eu vehicula ex aliquam. Mauris commodo in ligula luctus laoreet.
    Donec vestibulum lacus ut urna fringilla vulputate. Morbi porta, nisi nec fermentum faucibus, neque est viverra purus, vitae lacinia ipsum urna nec nisi. Donec sed tortor dignissim diam tincidunt commodo nec at odio. Fusce metus nisl, vestibulum nec
    leo molestie, placerat cursus arcu. Nunc porttitor, erat eget blandit scelerisque, lectus quam volutpat turpis, eu vulputate felis est ac nisl. Suspendisse dictum metus eu interdum vehicula. Suspendisse auctor vestibulum nulla quis porta. Donec pulvinar
    felis vel lorem bibendum lobortis. Sed vestibulum condimentum erat eget mattis. Nunc gravida semper lectus id tempus. Curabitur rutrum dui et eros consequat dapibus. Praesent in elit auctor, congue diam vitae, egestas mi. In lectus felis, sagittis
    ac felis quis, venenatis luctus est. Ut eget justo aliquam, ornare ligula sed, condimentum ex. In at gravida metus, ac elementum orci. Pellentesque congue sed tellus vel hendrerit. Quisque accumsan lacus sit amet lacus posuere luctus. Lorem ipsum
    dolor sit...

SCSS

/* Base Styles */

*,
*:after,
*:before {
    box-sizing: border-box;
}

body {
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: 16px;
    padding: 0.5em;
}

h1 {
    color: #61bb46;
    font-size: 2em;
}

h2 {
    font-size: 0.75em;
    margin-bottom: 1em;
}

/* Random Styles to Test*/

#data-simplebar,
.simplebar,
.simplebar-alt {
    display: inline-block;
    height: 50vh;
    margin-bottom: 1rem;
    margin-right: 1rem;
    padding: 1rem;
    width: 350px;
}

#data-simplebar {
    background-color: red;
    color: white;
}

.simplebar {
    background-color: lime;
}

.simplebar-alt {
    background-color: orange;
}

JavaScript

//Create a loop for all instances of SimpleBar class
var simplescrollbars = '.simplebar, .simplebar-alt';

$(simplescrollbars).each(function(index) {
    new SimpleBar($(simplescrollbars)[index], { autoHide: false });
});