JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scrollable">
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
</div>


<br/>
<div id="l">log:</div>

CSS

#scrollable { height:400px; width:500px; overflow:auto; background:#ccc; outline:0; }
.img        { height:300px; width:200px; margin:10px auto; background:#fff; }

JavaScript

var page = 1;
var pHeight = 310;

$('#scrollable')
    .click(function(){
        $(this).focus();
        $('#l').text('focused!');
    })
    .keyup(function(ev){
        if(ev.keyCode == 37){
            page--;
            prev();
        } else if(ev.keyCode == 39){
            page++;
            next();
        }
    });


function next(){
    $('#l').text('next page');
    $('#scrollable').animate({scrollTop: page * pHeight}, 'fast');
}

function prev(){
    $('#l').text('previous page');
    $('#scrollable').animate({scrollTop: page * pHeight}, 'fast');
}