JSFiddle - React, Tailwind, and code Playground

by jansian

HTML

<script src="http://code.jquery.com/ui/1.8.13/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.13/themes/base/jquery-ui.css">
<div id="overview">
    <div id="scrollbox"></div>
</div>

<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>
<div class="main"></div>

CSS

#overview {
    width: 60px;
    height: 300px;
    float: left;
    border: 1px solid black;
    margin-right: 10px;
    position: fixed;
}

#scrollbox {
    width: 60px;
    height: 20px;
    cursor: move;
    background: black;
    position: fixed;
}

.main {
    width: 200px;
    height: 50px;
    background: black;
    margin-left: 70px;
    margin-bottom: 10px;
}

JavaScript

// This manages a scrollbar
$("#scrollbox").draggable({
     containment: '#overview',
    axis: 'y',
    drag: function(event, ui) {
            $(document).scrollTop(ui.position.top);
        },
   });