Как разместить горизонтальную прокрутку в центре, когда активна текущая ссылка

Question

Я сталкивался с этим примером , и мне нужно создать такую ​​же функциональность только с vanilla JS.

Кто-нибудь делал что-нибудь подобное?

https://jsfiddle.net/onigetoc/6bfuspkq/

$("#timepicker li").on("click", function() {
  $("#timepicker li").removeClass("active");
  $(this).addClass("active");
  $("#timepicker").scrollCenter(".active", 300);
});


jQuery.fn.scrollCenter = function(elem, speed) {
  var active = jQuery(this).find(elem); // find the active element
  var activeWidth = active.width()/2; // get active width center
  var pos = active.position().left+activeWidth; //get left position of active li + center position
  var currentscroll = jQuery(this).scrollLeft(); // get current scroll position
  var divwidth = jQuery(this).width(); //get div width
  pos = pos + currentscroll - divwidth / 2; // for center position if you want adjust then change this

  jQuery(this).animate({
    scrollLeft: pos
  }, speed == undefined ? 1000 : speed);
  return this;
};

// http://podzic.com/wp-content/plugins/podzic/include/js/podzic.js
jQuery.fn.scrollCenterORI = function(elem, speed) {
    jQuery(this).animate({
        scrollLeft: jQuery(this).scrollLeft() - jQuery(this).offset().left + jQuery(elem).offset().left
    }, speed == undefined ? 1000 : speed);
    return this;
};