JSFiddle - React, Tailwind, and code Playground

by musicreader

HTML

<div id="clickResult">

</div>
<div id="main_div">

<div id="content_div">
Naar beneden scrollen.
<div id="spacer">
</div>
<div id="tests">
<a href="javascript:void(0);" onclick="clickButton('test1')">Test 1</a>
<br/>&nbsp;<br/>
<a href="javascript:void(0);" onpointerdown="clickButton('test2')">Test 2</a>
<br/>&nbsp;<br/>
<a href="javascript:void(0);" onmousedown="clickButton('test3')">Test 3</a>
<br/>&nbsp;<br/>
<a href="javascript:void(0);" onmouseup="clickButton('test4')">Test 4</a>
<br/>&nbsp;<br/>
<a href="javascript:void(0);" onpointerup="clickButton('test5')">Test 5</a>
</div>

</div>

</div>

CSS

#content_div{
  width:100%;
  height:1000px;
  font-size: 23px;
}
#main_div{
  height: 300px;
  width: 90%;
  border: 1px solid black;
  overflow-y: scroll;
}
#spacer{
  height:400px;
}
#tests{
  text-align:center;
}
#clickResult{
    font-size: 23px;
    text-align:center;
    height:50px;
}

a{
  background-color:lightgray;
}

JavaScript

function clickButton(text){
	var resultDiv=document.getElementById("clickResult");
  resultDiv.innerHTML=Date.now()+" - "+text;
}