element_outside_viewport.html

Enable keyboard shortcuts

<!DOCTYPE html>

<style>

  div {

    position: absolute;

    width: 100px;

    height: 100px;

  .top { background-color: red; }

  #top-70 { left: 80px; top: 0; }

  #top-50 { left: 190px; top: 20px; }

  #top-30 { left: 300px; top: 40px; }

  .right { background-color: black; }

  #right-70 { top: 80px; right: -140px;}

  #right-50 { top: 190px; right: -120px;}

  #right-30 { top: 300px; right: -100px;}

  .bottom { background-color: blue; }

  #bottom-70 { right: -50px; bottom: -140px; }

  #bottom-50 { right: 60px; bottom: -120px; }

  #bottom-30 { right: 170px; bottom: -100px; }

  .left { background-color: green; }

  #left-70 { bottom: -50px; left: 0; }

  #left-50 { bottom: 60px; left: 20px; }

  #left-30 { bottom: 170px; left: 40px; }

</style>

<body onload="window.scrollTo(70, 70);">

  <div id="top-70" class="top"></div>

  <div id="top-50" class="top"></div>

  <div id="top-30" class="top"></div>

  <div id="right-70" class="right"></div>

  <div id="right-50" class="right"></div>

  <div id="right-30" class="right"></div>

  <div id="bottom-70" class="bottom"></div>

  <div id="bottom-50" class="bottom"></div>

  <div id="bottom-30" class="bottom"></div>

  <div id="left-70" class="left"></div>

  <div id="left-50" class="left"></div>

  <div id="left-30" class="left"></div>

</body>