JSFiddle - React, Tailwind, and code Playground

HTML

<div class="arrow-left">&laquo;</div>
<div id="years">
    <div id="scroll"></div>
</div>
<div class="arrow-right">&raquo;</div>

CSS

.arrow-left, .arrow-right {
    display: inline-block;
    cursor: pointer;
    float: left;
    z-index: 100;
}
#years{
    width: 200px;
    overflow: hidden;
    margin: 0 0 0 7px;
    display: inline-block;
    height: 20px;
    box-shadow: inset 0 0 10 #000;
    float: left;
}
#years #scroll {
    position: relative;
    width: 2000px;
}
.month {
    display: inline-block;
    width: 40px;
}

JavaScript

totalYears = 10;
counterClick = 0;

startDate = new Date(new Date().getFullYear() - (totalYears / 2), 0, 1);
endDate = new Date(new Date().getFullYear() + (totalYears / 2), 0, 1);

append = '';

for(i = (totalYears / 2); i >= 0; --i){
    year = new Date(new Date().getFullYear() + i, 0, 1).getFullYear();
    append += '<div class="month '+year+'">'+year+'</div>';
}

for(i = 1; i <= (totalYears / 2); ++i){
    year = new Date(new Date().getFullYear() - i, 0, 1).getFullYear();
    append += '<div class="month '+year+'">'+year+'</div>';
}

$('#years #scroll').html(append);

$('.arrow-left').bind('click', function() {
    if(counterClick <= 0) {
       return;
    }
    counterClick--;
    $('#scroll').animate({left: '+=40px'});
});
$('.arrow-right').bind('click', function() {
    if(counterClick > ($('#scroll div').size() / 2)) {
       return;
    }
    counterClick++;
    $('#scroll').animate({left: '-=40px'});
});


for(i = 0; i <= (totalYears / 4); ++ i) {
    $('.arrow-right').trigger('click');
    /* Perhaps just center the current year? */
}