JSFiddle - React, Tailwind, and code Playground

by zapaza10

HTML

<div class="c">
  <div class="i">

  </div>
</div>
<div id="up">up</div>
<div id="down">down</div>

CSS

.c {
  width: 300px;
  height: 400px;
  border: 1px solid;
  overflow: auto;
}

.i {
  height: 3000px;
  background: #1e5799;
  background: -moz-linear-gradient(top, #1e5799 0%, #ff3030 26%, #37ef2d 50%, #2c28ff 83%, #7db9e8 100%);
  background: -webkit-linear-gradient(top, #1e5799 0%, #ff3030 26%, #37ef2d 50%, #2c28ff 83%, #7db9e8 100%);
  background: linear-gradient(to bottom, #1e5799 0%, #ff3030 26%, #37ef2d 50%, #2c28ff 83%, #7db9e8 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
}

JavaScript

var container = $('.c'),
    hopDistance = 50,
    interval = 50,
    intervalID;

$('#up').on({
  mousedown: function() {
    intervalID = setInterval(function() {
      container.scrollTop(container.scrollTop() - hopDistance);
    }, interval)
  },
  mouseup: function() {
    clearInterval(intervalID);
  }
})
$('#down').on({
  mousedown: function() {
    intervalID = setInterval(function() {
      container.scrollTop(container.scrollTop() + hopDistance);
    }, interval)
  },
  mouseup: function() {
    clearInterval(intervalID);
  }
})