JSFiddle - React, Tailwind, and code Playground

by yonran

HTML

<div class=box>one</div>
<div class=box>two</div>
<div class=box>three</div>
<div class=box>four</div>
<div class=box>five</div>
<div class=box>six</div>
<div class=box>seven</div>
<div class=box>eight</div>
<div class=box>nine</div>
<div class=box>ten</div>
<div class=box>eleven</div>
<div class=box>twelve</div>
<div class=box>thirteen</div>

CSS

.box {
    height: 150px; border-style:dotted; border-color: yellow; border-width: 3px 0 0 0;
}

JavaScript

// Webpage handles its own scrolling. This is modeled
document.addEventListener("keydown", function(e) {
  switch (e.keyCode) {
  case 33:  // pgup
    window.scrollBy(0,-document.documentElement.clientHeight);
    console.log("Did my own page up");
    break;
  case 34:  // pgdown; fall through
  case 32:  // space
    window.scrollBy(0,document.documentElement.clientHeight);
    console.log("Did my own page down");
    break;
  default:
    return;
  }
  e.preventDefault();
  console.log(e);
}, false);