JSFiddle - React, Tailwind, and code Playground

by rossmartin

HTML

<div id="wrapper">
    <div id="container">
        <div id="timeline_wrapper">
            <div id="timeline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae commodo erat. Etiam eget condimentum neque, sed volutpat enim. Sed commodo dui metus, at dignissim sem porta quis. Morbi a leo et dui malesuada vulputate dictum vel mauris. Cras luctus faucibus justo id dapibus. Etiam pulvinar nibh tortor, et pretium arcu gravida vel. In egestas nulla ac ullamcorper posuere. Ut auctor vulputate nibh vehicula imperdiet. Nam suscipit tortor vitae libero dapibus, id lobortis massa semper. Etiam sit amet ipsum ultricies, accumsan nulla nec, pulvinar est. Suspendisse vitae metus lacus. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum commodo justo cursus pellentesque tempus. Sed et posuere velit. Vestibulum sed massa aliquam neque dictum ullamcorper. Curabitur auctor ut ipsum at malesuada. Nam dictum commodo placerat. Pellentesque posuere, lacus non mollis pretium, tortor magna auctor sapien, ac faucibus mi leo quis nunc. Suspendisse potenti. Nam egestas enim vitae ligula vulputate, non imperdiet tellus rutrum. Sed vehicula tempus diam, sed consequat erat egestas nec. Sed ut pharetra lorem, at interdum ante. Aenean fermentum nulla quis leo interdum interdum. Nulla scelerisque nunc eu ligula lobortis interdum. Morbi ultricies enim ac felis aliquam viverra. Morbi ullamcorper sollicitudin dui, vel mattis ipsum fermentum non. Sed mattis luctus congue. Integer eu libero ut leo pellentesque condimentum quis id quam. Phasellus volutpat molestie odio. Vivamus aliquam quis mauris in consectetur. Phasellus bibendum mauris eu risus condimentum, sed fringilla augue semper. Suspendisse varius nisi convallis sagittis interdum. Phasellus ultricies mauris a blandit gravida. Vivamus sit amet urna in urna dictum tincidunt. Aenean blandit, diam at porttitor imperdiet, lacus libero lobortis nisi, nec...

CSS

#wrapper {
    width: 100%;
}
#container {
    width: 735px;
    height: 532px;
    border: 1px solid red;
}
#controller:hover {
    cursor: pointer;
}
#timeline_wrapper {
    width: 550px;
    height: 480px;
    border: 1px solid gray;
    margin-top: 10px;
    margin-left: 10px;
    float: left;
    position: relative;
    overflow: hidden;
}
#timeline {
    width: 540px;
    height: 2100px;
    position: absolute;
    background-color: #abc;
    margin: 5px;
}
#horizontal_control {
    background-color:gray;
    padding: 10px;
}
#controller {
    height: 20px;
    width: 20px;
    background: red;
    border-radius: 30px;
}

JavaScript

//modification
var timeline = $('#timeline');
var tlParent = timeline.parent();
var tlHeight = timeline.height();
var tlPHeight = tlParent.height();

//scroll down the content on load
var lastDirection
, newPos = tlHeight - tlPHeight;
$('#timeline_wrapper').animate({scrollTop:newPos + "px"},800,"linear");
//end modification


var $controller = $('#controller')
    , scrollableHeight = $('#timeline').height() - $('#timeline_wrapper').height()
    , draggableWidth = $('#horizontal_control').width() - $controller.width()
    , ratio = scrollableHeight / draggableWidth
    , initialOffset = $controller.offset().left;

$controller.draggable({
    revert: false,
    containment: "parent",
    axis: "x",
    drag: function (event, ui) {
        var distance = ui.offset.left - initialOffset
        , currentPos = $('#timeline_wrapper').scrollTop();
        var direction = ui.position.left;
        (lastDirection < direction) ? $('#timeline_wrapper').scrollTop(currentPos - distance) : $('#timeline_wrapper').scrollTop(currentPos + distance);
        lastDirection = ui.position.left;
    }
});