JSFiddle - React, Tailwind, and code Playground

HTML

<p>Heure d'arivée...

CSS

body {background: #333;}

p {text-align: center;font: 2em sans-serif;color: #fff;}

div {overflow-y: scroll;width: 80%;height: 500px;margin: auto;}
table {margin: 0;padding: 0;table-layout: fixed;width: 100%;font: 1em sans-serif;color: #fff;}
tr:hover td {background: #5FB75D !important;}
td {padding: 25px 20px;background: #3f3f3f;}
td:first-child {width: 100px;}
tr:nth-child(even) td {background: #484848;}

JavaScript

window.requestAnimationFrame || (window.requestAnimationFrame = function () {
    return window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback, element) {
        window.setTimeout(callback, 1000 / 60)
    }
}());


function doScroll(start, to, duration){

	var progress = (new Date - start) / duration;
	
	progress > 1 && (progress = 1);
	
	var delta = (progress < .5) ? Math.pow(2 * progress, 3) / 2 : (2 - Math.pow(2 * (1 - progress), 3)) / 2,
		result = to * delta;

	div.scrollTop = result;
	
	if (progress === 1) return;
	
	window.requestAnimationFrame(function(){
		doScroll(start, to, duration);
	});
	
}



var	time = new Date(),
	h = time.getHours(),
	m = time.getMinutes();

var p = document.querySelector("p"),
	div = document.querySelector("div"),
	colonneHorraires = document.querySelectorAll("td:first-child");

p.innerHTML += h+":"+m;

var scrollToThisPosition,
	i = 0,
	l = colonneHorraires.length;

for ( ; i<l; i++){
	
	if (parseInt(colonneHorraires[i].innerHTML) == h) {

		scrollToThisPosition = colonneHorraires[(m/30 < 1) ? i : i+1].offsetTop;
		break;

	}
	
}

doScroll(new Date(), scrollToThisPosition, 1200);