JSFiddle - React, Tailwind, and code Playground

by sbc640964

HTML

<a id="down" class="abs">down</a>
<a id="up" class="abs">up</a>
<div id="div1">

</div>

<script type="text/javascript">


var mouseDown;


document.getElementById("down").onmousedown =
function(){
doMouseDown();
mouseDown = setInterval(doMouseDown, 100);
window.onmouseup = function() {
clearInterval(mouseDown);
}
document.getElementByTagName("body").onmouseup = function() {
clearInterval(mouseDown);
}
}
function doMouseDown(){
window.scrollBy({top: 50, left: 0, behavior: 'smooth' });
}
var mouseUp;


document.getElementById("up").onmousedown =
function(){
doMouseUp();
mouseUp = setInterval(doMouseUp, 100);
window.onmouseup = function() {
clearInterval(mouseUp);
}
document.getElementByTagName("body").onmouseup = function() {
clearInterval(mouseUp);
}
}
function doMouseUp(){
window.scrollBy({top: -50, left: 0, behavior: 'smooth' });
}



</script>

CSS

.abs {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background:red;
  padding:10px;
}
#div1{
  height:1500px;
  display:block;
  background:purple;
}