JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="parent">
    <div class="contentBlock">1</div>
    <div class="contentBlock">2</div>
    <div class="contentBlock">3</div>
    <div class="contentBlock">4</div>
    <div class="contentBlock">5</div>
  </div>
</div>
<span id="panLeft" class="panner" data-scroll-modifier='-1'>Left</span>

<span id="panRight" class="panner" data-scroll-modifier='1'>Right</span>

CSS

#container {
  width: 600px;
  overflow-x: hidden;
}

#parent {
  width: 6000px;
}

.contentBlock {
  font-size: 10em;
  text-align: center;
  line-height: 400px;
  height: 400px;
  width: 500px;
  margin: 10px;
  border: 1px solid black;
  float: left;
}

.panner {
  border: 1px solid black;
  display: block;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 45%;
}

.active {
  color: red;
}

#panLeft {
  left: 0px;
}

#panRight {
  right: 0px;
}

JavaScript

(function() {

  document.body.onkeyup = function(e) {
  
    var code = e.keyCode;
    if(code === 39) {
         startScrolling(1, scrollStep);
          setTimeout(stopScrolling, 300)
    }
    if(code === 37) {
    startScrolling(-1, scrollStep);
    setTimeout(stopScrolling, 300)
    }
  };
  
  $("#panLeft").click(function(){
  startScrolling(-1, scrollStep);
    setTimeout(stopScrolling, 300);
  });
  
    $("#panRight").click(function(){
  startScrolling(1, scrollStep);
    setTimeout(stopScrolling, 300);
  });
  

  var scrollHandle = 0,
    scrollStep = 5,
    parent = $("#container");

  //Start the scrolling process
  //$(".panner").on("mouseenter", function() {
  //  var data = $(this).data('scrollModifier'),
 //     direction = parseInt(data, 10);

//    $(this).addClass('active');

 //   startScrolling(direction, scrollStep);
//  });

  //Kill the scrolling
  //$(".panner").on("mouseleave", function() {
 //   stopScrolling();
  //  $(this).removeClass('active');
//  });

  //Actual handling of the scrolling
  function startScrolling(modifier, step) {
    if (scrollHandle === 0) {
      scrollHandle = setInterval(function() {
        var newOffset = parent.scrollLeft() + (scrollStep * modifier);

        parent.scrollLeft(newOffset);
      }, 10);
    }
  }

  function stopScrolling() {
    clearInterval(scrollHandle);
    scrollHandle = 0;
  }

}());