Horizontal Scroll Overflow

Horizontal Scroll Overflow

by pphheerroonn

HTML

<div class="container">
  SCROLL ALL THE WAY LEFT ⬅️
  <div class="outer-scroller">
    <div class="scroller">
      <div class="box">
      </div>
      <div class="box">
      </div>
      <div class="box">
      </div>
      <div class="box">
      </div>
      <div class="box">
      </div>
    </div>
    <!--outter-scroller end-->
  </div>
  <!--scroller end-->
  FIN
</div>
<!--container end-->
<button id="slide-right">
Right
</button>
<script>const button = document.getElementById('slide-right');
console.log(button);
button.onclick = function () {
  document.getElementById('container').scrollRight += 20;
};</script>

CSS

.container {
  width: 500px;
  padding: 100px, 0px;
  background: grey;
}

.outer-scroller {
  overflow-x: scroll;
}

.scroller {
  width: 1600px;
  height: 250px;
  background: white;
}

.box {
  width: 300px;
  height: 100%;
  margin-left: 15px;
  float: left;
  background: pink;
}