JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<div class="controls">
  <button type="button" id="play">play</button>
  <button type="button" id="stop">stop</button>
  <input type="range" min=0 max=0 id="range">
</div>


<div id="test"></div>

CSS

html, body {
  height:100%;
}

#test span {
  display: block;
}

.controls {
    position:absolute;
}
#test {

  max-height:100%;
  overflow-y:scroll;
}

JavaScript

var c = document.createElement("div");
var d = document.getElementById("test");
var p = document.getElementById("play");
var s = document.getElementById("stop");
var r = document.getElementById("range");

for (var i = 0; i < 1000; i++) {
  s = document.createElement("span");
  s.innerHTML = i;
  c.appendChild(s);
}

d.appendChild(c);

var h = d.scrollHeight;
r.max=h/100;
r.value=0;

r.addEventListener("change", function(e) {
var v = this.value;
console.log(v);
d.scrollTop =v*100;
})