JSFiddle - React, Tailwind, and code Playground

by waxwing

HTML

<div id="scroller">
    <div id="contents">
        <div class="box a">a</div>
        <div class="box b">b</div>
        <div class="box c">c</div>
        <div class="box d">d</div>
        <div class="box e">e</div>
        <div class="box f">f</div>
        <div class="box g">g</div>
        <div class="box h">h</div>
        <div class="box i">i</div>
    </div>
</div>

CSS

.box {
    float: left;
    margin: 10px;
    height: 100px;
    width: 100px;
    background: red;
}

#scroller {
    overflow: hidden;
    width: 200px;
    height: 200px;
    position: relative;
}

#contents {
    width: 2000px;
    height: 200px;
    position: relative;
}

JavaScript

$('.box').click(function () {
    //$('#contents').animate({'left': -$(this).position().left});
    $('#scroller').animate({ scrollLeft: $(this).position().left});
});