How to create a Horizontal Scroll on button click using JavaScript?

https://www.yogeshchauhan.com/how-to-create-a-horizontal-scroll-on-button-click-using-javascript/

by Venkatesh Dematti

HTML

<section id="container">
  <div id="posts">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    <a href="#">Link 6</a>
    <a href="#">Link 7</a>
    <a href="#">Link 8</a>
  </div>
</section>

<br>

<button type="button" class="prev" onclick="slide('left')">Prev</button>
<button type="button" class="next" onclick="slide('right')">Next</button>

<br>
<br>

This fiddle is a part of a <a href="https://www.yogeshchauhan.com/how-to-create-a-horizontal-scroll-on-button-click-using-javascript/" target="_blank" style="color:white;">Blog Post on YogeshChauhan.com</a>

SCSS

body {
  margin: 1rem;
  background: #444;
  min-height: 200px;
}

#container {
  border: 1px solid #ccc;
  overflow: auto;
  width: 200px;

  #posts {
    max-width: 300px;
    min-height: 50px;
    white-space: nowrap;
    display: flex;
    align-items: center;

    a {
      border: 1px solid white;
      padding: 5px;
      color: white;
      margin: 5px;
    }
  }
}

button {
  background: black;
  color: white;
  border: none;
  outline: none;
  padding: 10px;
  cursor: pointer;
}

JavaScript

function slide(direction){
    var container = document.getElementById('container');
    scrollCompleted = 0;
    var slideVar = setInterval(function(){
        if(direction == 'left'){
            container.scrollLeft -= 10;
        } else {
            container.scrollLeft += 10;
        }
        scrollCompleted += 10;
        if(scrollCompleted >= 100){
        alert('yes');
            window.clearInterval(slideVar);
            $('.next').css("display","none");
        }
    }, 50);
}