HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollBy basic</title>
  <style>
    body { font-family: sans-serif; margin: 1rem; }
    #panel {
      width: 260px; height: 160px; overflow: auto;
      border: 2px solid #334155; border-radius: 8px; padding: 0.5rem;
    }
    .wide { width: 600px; }
    .tall { height: 500px; background: linear-gradient(#e2e8f0, #94a3b8); }
    button { margin-top: 0.75rem; padding: 0.5rem 1rem; cursor: pointer; }
  </style>
</head>
<body>
  <div id="panel">
    <div class="wide tall">Scrollable area — click the button to scrollBy(300, 300).</div>
  </div>
  <button type="button" id="go">scrollBy(300, 300)</button>
  <p id="out">top: 0, left: 0</p>
  <script>
    var panel = document.getElementById("panel");
    var out = document.getElementById("out");
    function show() {
      out.textContent = "top: " + panel.scrollTop + ", left: " + panel.scrollLeft;
    }
    panel.addEventListener("scroll", show);
    document.getElementById("go").addEventListener("click", function () {
      panel.scrollBy(300, 300);
      setTimeout(show, 50);
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element.scrollBy — basic scrollBy(300, 300) (Try It)