JSFiddle - React, Tailwind, and code Playground

by e_kurbanov

HTML

<div id="outer">
  <div id="inner"></div>
</div>
<input type="button" id="next" value="next">

CSS

*{
  box-sizing: border-box;
}
#outer{
  position: relative;
  bordeR: 1px solid red;
  height: 100px;
  width: 400px;
  overflow: auto;
}
#inner{
  height: 100%;
  width: 800px;
  bordeR: 1px solid blue;

}

JavaScript

var next = document.getElementById('next');
var outer = document.getElementById('outer');
var speed = 1;
next.addEventListener('click', function(){
	console.log(outer.offsetLeft);
  var counter = 0;
  var i = setInterval(function(){
  		outer.scrollTo(counter, 0)
  		counter += 5;
      if(counter === 800){
      		clearInterval(i);
      }
  }, 1)
});