JSFiddle - React, Tailwind, and code Playground

by qhoc

HTML

<script src="https://raw.github.com/Empact/jquery-tinyscrollbar/master/jquery.tinyscrollbar.js"></script>
<script src="https://raw.github.com/GBKS/Wookmark-jQuery/master/jquery.wookmark.min.js"></script>
<script src="https://raw.github.com/jamesflorentino/nanoScrollerJS/master/bin/javascripts/jquery.nanoscroller.min.js"></script>
<script src="https://raw.github.com/rochal/jQuery-slimScroll/master/jquery.slimscroll.min.js"></script>
<div class=left>
    SOME RANDOM STUFFS HERE...
</div>
<div class=right>
    <div class=photos>
        <ul>
            <li>
                <img src="http://media-cache-ec2.pinterest.com/192x/d5/29/8c/d5298c87155557aedba524494355eb61.jpg">
            </li>
            <li>
                <img src="http://media-cache-ec7.pinterest.com/192x/71/dc/bb/71dcbbafa44bd245e6aff0089cd97be2.jpg">
            </li>
            <li>
                <img src="http://media-cache-ec5.pinterest.com/192x/a1/0e/3e/a10e3ecf5561f2e86496ddcd22829c4c.jpg">
            </li>
            <li>
                <img src="http://media-cache-ec4.pinterest.com/192x/1f/db/18/1fdb18e0ec749d93fa3374c63e991899.jpg">
            </li>
            <li>
                <img src="http://media-cache-ec2.pinterest.com/192x/83/9a/2e/839a2ec46cc57c006d44af5afca28d79.jpg">
            </li>
            <li>
                <img src="http://media-cache-ec4.pinterest.com/192x/b4/b7/ee/b4b7ee3185693d9a9a8509d17ce8de36.jpg">
            </li>
            <li>
                <img src="http://media-cache-ec4.pinterest.com/192x/f6/f7/c8/f6f7c89a63cd2550244d99fdb4390a34.jpg">
            </li>
        </ul>
    </div>
</div>

CSS

ul {
    position: relative;
    list-style: none outside none;
}

.left {
    background: gray;
    width: 200px;
}
.right {
    background: yellow;
    position: fixed;
    //overflow-y: scroll;
    left: 110px;
    right: 0;
    bottom: 0;
    top: 0;
    margin: 0;
    padding: 0;
    //width: 500px;
}

.nano { background: #bba; width: 500px; height: 500px; }
.nano .content { padding: 10px; }
.nano .pane   { background: #888; }
.nano .slider { background: #111; }

JavaScript

/*$('.photos ul li').wookmark({
  container: $('.photos'),
  offset: 5,
  itemWidth: 200,
  autoResize: true
});*/

//$('.right').tinyscrollbar();

//$(".right").nanoScroller();

$('.photos').slimScroll({
    //width: '200px',
    height: '100%'
});