JSFiddle - React, Tailwind, and code Playground

by Rusln

HTML

<div id="content-column-left" style="background-color:#CCCCCC; padding:20px; width: 200px;float:left;">
    <div id="scroller1">
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div id="nBox1" class="box">Event 1</div>
        <div...

CSS

#scroller1, #scroller2 {
    height: 500px;
    overflow: hidden;
}
.filler {
    height: 500px;
}
.box {
    width: 200px;
    background-color: #9CC;
    height: 150px;
    margin-bottom: 10px
}
.top-right-box {
    background-color:#FC6;
    width: 350px;
    height: 100px;
    margin-bottom: 10px;
}
.top-right-box span {
    cursor: pointer;
}
.scrollbutton {
    cursor: pointer;
}

JavaScript

var container = $('#scroller1'),
    scrollTo = $('.leftfirst');

container.animate({
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
}, 200);

var container = $('#scroller2'),
    scrollTo = $('.rightfirst');

container.animate({
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
}, 200);

$(".top-right-box span").click(function () {
    var myClass = $(this).attr("class");
    var container = $('#scroller1'),
        scrollTo = $('#' + myClass);

    container.animate({
        scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
    }, 500);
});

$('.scrollbutton').on('click', function (e) {
    e.preventDefault();

    var t = $(this).attr("title"),
        that = $(this);
    var containerID = $(this).parent().attr("id"),
        container = $('#' + containerID);

    if (t === 'Up' && $('.current').next('div.box').length > 0) {
        var $next = $('#' + containerID + ' .current').next('.box');
        var top = $next.offset().top;

        $('#' + containerID + ' .current').removeClass('current');
        $(function () {
            $next.addClass('current');
            container.animate({
                scrollTop: $('.current').offset().top - container.offset().top + container.scrollTop()
            }, 500)

        });
    } else if (t === 'Down' && $('.current').prev('div.box').length > 0) {
        var $prev = $('#' + containerID + ' .current').prev('.box');
        var top = $prev.offset().top;

        $('#' + containerID + ' .current').removeClass('current');

        $(function () {
            $prev.addClass('current');
            container.animate({
                scrollTop: $('.current').offset().top - container.offset().top + container.scrollTop()
            }, 500)
        });
    }
});