JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<script src="http://alchemycs.com/boost/js/jquery.jscrollpane.min.js"></script>
        <article class="scroll presenting">
            <h2>Instructor's notes</h2>
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</li>
                <li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
                <li>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</li>
                <li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</li>
                <li>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</li>
                <li>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</li>
                <li>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</li>
                <li>Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</li>
                <li>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</li>
                <li>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</li>
                <li>Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.</li>
                <li>Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</li>
                <li>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien.</li>
                <li>Vestibulum purus quam, scelerisque...

CSS

article {
    position: fixed;
    top: 120px;
    left: 30px;
    bottom: 60px;
    right: 30px;
    overflow: auto;
}

/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer
{
    overflow: hidden;
    position: relative;
}

.jspPane
{
    position: absolute;
}

.jspVerticalBar
{
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background: #f4f4f4;
}

.jspHorizontalBar
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: #f4f4f4;
}

.jspVerticalBar *,
.jspHorizontalBar *
{
    margin: 0;
    padding: 0;
}

.jspCap
{
    display: none;
}

.jspHorizontalBar .jspCap
{
    float: left;
}

.jspTrack
{
    background: #f4f4f4;
    position: relative;
}

.jspDrag
{
    background: #d2d2d2;
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer;
    border: 1px solid #969696;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
    float: left;
    height: 100%;
}

.jspArrow
{
    background: #50506d;
    text-indent: -20000px;
    display: block;
    cursor: pointer;
}

.jspArrow.jspDisabled
{
    cursor: default;
    background: #80808d;
}

.jspVerticalBar .jspArrow
{
    height: 16px;
}

.jspHorizontalBar .jspArrow
{
    width: 16px;
    float: left;
    height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
    outline: none;
}

.jspCorner
{
    background: #eeeef4;
    float: left;
    height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
    margin: 0 -3px 0 0;
}

JavaScript

$(function()
            {
                $('.scroll').jScrollPane();
            });

$(window).resize(function() {
    $(function(){
        $('.scroll').jScrollPane({
                showArrows: true,
                horizontalGutter: 30,
                verticalGutter: 30,
                arrowScrollOnHover: true
            }
        );
    });
});