JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div class="img">
        <img src="http://i.imgur.com/2P2Z4.png" class="up" alt="" />
    </div>
    <div id="scrollDIV">
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
        <div>Lorem Ipsum</div>
    </div>
    <div class="img">
        <img src="http://i.imgur.com/2P2Z4.png" class="down" alt="" />
    </div>
</div>

CSS

* {
    padding: 0px;
    margin: 0px;
}
#wrapper {
    width: 300px;
}
#scrollDIV {
    height: 200px;
    overflow: hidden;
    overflow-y: scroll;
    background-color: #ccf;
    color: #f3f;
    font-size: 20px;
}
#scrollDIV div {
    margin: auto;
    padding: 10px;
    border-bottom: 2px solid black;
    text-align: center;
}
div.img {
    width: 100px;
    margin: auto;
    overflow: hidden;
    height: 50px
}
img.up {
    width:300px;
    margin-left:-100px;
}
img.down {
    width:300px;
    margin-left:-200px;
    margin-top: -50px;
}

JavaScript

$('div.img img').on('click', function () {
    var scrollDIV = $('#scrollDIV');
    var scrollAtual = scrollDIV.scrollTop();
    var novoScroll = scrollAtual + ($(this).hasClass('up') ? -200 : 200);
        scrollDIV.animate({
            scrollTop: novoScroll + 'px'
        }, 1500);
});