Sliding horizontal menu

var scroller = document.querySelector('.gallery-row-scroll');
var leftArrow = document.getElementById('leftArrow');

var direction = 0;
var active = false;
var max = 10;
var Vx = 0;
var x = 0.0;
var prevTime = 0;
var f = 0.2;
var prevScroll = 0;

function physics(time) {
  // Measure how much time has passed
  var diffTime = time - prevTime;
  if (!active) {
    diffTime = 80;
    active = true;
  }
  prevTime = time;

  // Give power to the scrolling


  Vx = (direction * max * f + Vx * (1-f)) * (diffTime / 20);

  x += Vx;
  var thisScroll = scroller.scrollLeft;
  var nextScroll = Math.floor(thisScroll + Vx);

  if (Math.abs(Vx) > 0.5 && nextScroll !== prevScroll) {
    scroller.scrollLeft = nextScroll;
    requestAnimationFrame(physics);
  } else {
    Vx = 0;
    active = false;
  }
  prevScroll = nextScroll;
}

leftArrow.addEventListener('mousedown', function () {
  direction = -1;
  if (!active) {
    requestAnimationFrame(physics);
  }
});

leftArrow.addEventListener('mouseup', function () {
  direction = 0;
});

rightArrow.addEventListener('mousedown', function () {
  direction = 1;
  if (!active) {
    requestAnimationFrame(physics);
  }
});
rightArrow.addEventListener('mouseup', function(event){
  direction = 0;
});

.cabecalho{
  width: 100%;
  background-color: #a01127;
  font-size: 3rem;
  color: white;
  text-align: center;
  padding: .5rem 0;
}

.menu{
  width: 100%;
  background-color: #a01127;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.menu ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li{
  display: inline;
  padding: 0 .7rem;
}

.menu a{
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
}


.gallery-row{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  display:-webkit-flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
      -ms-flex-flow:row nowrap;
          flex-flow:row nowrap;
}

.gallery-row-scroll{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  display:-webkit-flex;
  /* overflow-x:scroll; */
  -webkit-overflow-scrolling: touch;
  -ms-flex-flow: row nowrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-flow: row nowrap;

  overflow: hidden;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;

}

.gallery-row-scroll > *{
  margin: 0 0.1em;
  -webkit-flex:0 0 auto;
}

.gallery-row-scroll > :first-child{
  margin-left: 0;
}

.gallery-row-scroll > :last-child{
  margin-right: 0;
}

.gallery-row img{
  display:block;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;
}

.gallery-row .arrow.right{
  right:0;
}

.gallery-row.large img{
  height:200px;
  width:auto;
}

.gallery-row.small img{
  height:150px;
  width:auto;
}

.arrow {
  display: inline-block;
  padding: 1rem;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

<div>
  <div class="cabecalho"><span>Cabeçalho</span></div>
  <div id="widthControlled" class="gallery-row small menu">
    <div id="leftArrow" class="arrow left" >
      <
    </div>
    <ul id="scroller" class="gallery-row-scroll">
      <li><a href="#">Acessórios</a></li>
      <li><a href="#">Automação</a></li>
      <li><a href="#">Cabos &amp; Conexões </a></li>
      <li><a href="#">Cartuchos &amp; Toners</a></li>
      <li><a href="#">Computador</a></li>
      <li><a href="#">Energia </a></li>
      <li><a href="#">Game</a></li>
      <li><a href="#">Hardware</a></li>
      <li><a href="#">Impressoras</a></li>
      <li><a href="#">Monitor</a></li>
      <li><a href="#">Monitoramento</a></li>
      <li><a href="#">Notebook</a></li>
      <li><a href="#">Periféricos</a></li>
      <li><a href="#">Rede</a></li>
    </ul>
    <div id="rightArrow" class="arrow right">
      >
    </div>
  </div>
</div>