JSFiddle - React, Tailwind, and code Playground

by Artem

HTML

<div id="container">
  <div id="content">Бла-бла-бла</div>
</div>
<button id="slide" type="button">Пролистать</button>

CSS

#container {
  border: 1px solid #ccc;
  height: 100px;
  overflow: scroll;
  width: 100px;
}

#content {
  background-color: #ccc;
  width: 250px;
}

JavaScript

var button, container, content, slide, animation;

button = document.getElementById('slide');
container = document.getElementById('container');
content = document.getElementById('content');
button.addEventListener('click', function(){slide();});

slide = function(){
	if(container.scrollLeft == 150) { // #content.width - #container.width
  	console.log('Done!');
    container.scrollLeft = 0;
  	cancelAnimationFrame(animation);
    return;
  };
 	container.scrollLeft += 2;
	animation = requestAnimationFrame(slide);
};