JSFiddle - React, Tailwind, and code Playground

by Jools Chadwick

HTML

<div id="parent">
  <div id="scroller">
    <div id="content">
    </div>
  </div>
</div>

<div id="buttons">
  <button id="toggle" onclick="window.toggle()">Toggle display</button>
  <button id="scrollDown" onclick="window.scrollDown()">Scroll down</button>
  <button id="getScrollTop" onclick="window.getScrollTop()">Print Scroll Top</button>
</div>
<div id="output">
</div>

CSS

#scroller{
  width:200px;
  height:200px;
  overflow:auto;
}
#content{
  width:1000px;
  height:1000px;
}
#buttons{
  position: absolute;
  top:220px;
}
#output{
  position: absolute;
  top:250px;
}

JavaScript

var parent = document.getElementById('parent');
var scroller = document.getElementById('scroller');

var toggle = document.getElementById('toggle');
var scrollDown = document.getElementById('scrollDown');
var getScrollTop = document.getElementById('getScrollTop');

var output = document.getElementById('output');



var visible=true;
toggle.onclick = function toggle(){
	visible=!visible;
  parent.style.display=(visible?'block':'none');
}
scrollDown.onclick = function scrollDown(){
  scroller.scrollTop=1000;
}
getScrollTop.onclick = function getScrollTop(){
  output.innerHTML = scroller.scrollTop;
}