Как предотвратить направление прокрутки?

let value = $("#parent").scrollLeft()

$("#parent").scroll(function(e) {
  let direction = (this.scrollLeft > value) ? 'right' : ((this.scrollLeft === value) ? false : 'left');
  console.info(direction)

  if (direction == "left") {
    this.scrollLeft = value;
    e.preventDefault();
    e.stopPropagation();
  }

  value = $("#parent").scrollLeft()
})

#container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#parent {
  position: relative;
  width: 90%;
  height: 80%;
  overflow-y: hidden;
  overflow-x: scroll;
  white-space: nowrap;
  background: red;
}

.child {
  display: inline-block;
  position: relative;
  margin-left: 3%;
  width: 40px;
  height: 40px;
  background: gray;
}

.as-console-wrapper {
   height: 20px!important;
}
.as-console-row {
   background: green!important;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "container">
  <div id = "parent">
    <div class = "child">1</div>
    <div class = "child">2</div>
    <div class = "child">3</div>
    <div class = "child">4</div>
    <div class = "child">5</div>
    <div class = "child">6</div>
    <div class = "child">7</div>
    <div class = "child">8</div>
    <div class = "child">9</div>
    <div class = "child">10</div>
    <div class = "child">12</div>
    <div class = "child">13</div>
    <div class = "child">14</div>
    <div class = "child">15</div>
    <div class = "child">16</div>
    <div class = "child">17</div>
    <div class = "child">18</div>
    <div class = "child">19</div>
    <div class = "child">20</div>
  </div>
</div>