JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque repellat officiis similique excepturi adipisci commodi laborum enim minus, error, quia magnam odit? Harum quod, praesentium optio? Doloribus nobis, obcaecati quis!</div>
  <div>Reiciendis harum amet, natus praesentium recusandae facilis architecto velit hic, eos veritatis animi inventore totam delectus laboriosam quam, blanditiis eaque accusamus quae. Assumenda, exercitationem, minima. Facere debitis sit asperiores, sed!</div>
  <div>Eius soluta nihil assumenda praesentium qui, recusandae nesciunt quas, totam nulla natus repudiandae officia eligendi enim sequi fugit voluptates necessitatibus fugiat eveniet architecto obcaecati beatae, earum rem! Omnis minima, molestiae!</div>
  <div>Soluta quos magni recusandae libero sequi itaque quod ut id molestiae voluptate officia voluptas, unde minus nihil facere explicabo modi eligendi ipsum nulla. Laudantium, voluptatibus quam illo sed ratione sequi.</div>
  <div>Autem voluptatum saepe vitae sequi assumenda esse inventore, fugit ab sed exercitationem corporis non ex repudiandae odit debitis cum porro officia, quos magnam harum quo quam quisquam incidunt? Rem, hic!</div>
</div>

<button id="down">Down</button>

CSS

.content {
  width: 150px;
  max-height: 300px;
  background: aliceblue;
  overflow:  hidden;
}

JavaScript

var scrolling = false;
var step = 1;
var delay = 2;

$('#down').mousedown(function() {
	scrolling = true;
	scroll();
}).mouseup(function() {
	scrolling = false;
});

function scroll() {
	
  $('.content').animate({
  scrollTop: $('.content').scrollTop()+step
  }, delay, function() {
  	if (scrolling == true) {
    	scroll();
    }
  });

}