HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollBy page down</title>
  <style>
    body { font-family: sans-serif; margin: 1rem; }
    section {
      width: 300px; height: 180px; overflow-y: scroll;
      scroll-behavior: smooth;
      border: 1px solid #1e40af; border-radius: 8px; padding: 0.75rem;
    }
    .scroll-by { margin-top: 0.75rem; padding: 0.5rem 1rem; cursor: pointer; }
    pre { margin-top: 0.75rem; background: #f1f5f9; padding: 0.5rem; border-radius: 4px; }
  </style>
</head>
<body>
  <section>
    <p>Paragraph 1 — Lorem ipsum dolor sit amet.</p>
    <p>Paragraph 2 — Consectetur adipiscing elit.</p>
    <p>Paragraph 3 — Sed do eiusmod tempor incididunt.</p>
    <p>Paragraph 4 — Ut labore et dolore magna aliqua.</p>
    <p>Paragraph 5 — Ut enim ad minim veniam.</p>
    <p>Paragraph 6 — Quis nostrud exercitation ullamco.</p>
    <p>Paragraph 7 — Duis aute irure dolor in reprehenderit.</p>
    <p>Paragraph 8 — Excepteur sint occaecat cupidatat.</p>
    <p>Paragraph 9 — Curabitur pretium tincidunt lacus.</p>
    <p>Paragraph 10 — Nulla gravida orci a odio.</p>
  </section>
  <button type="button" class="scroll-by">scrollBy(0, 200)</button>
  <pre id="out">interrupted: (click button)</pre>
  <script>
    var section = document.querySelector("section");
    document.querySelector(".scroll-by").addEventListener("click", async function () {
      var result = await section.scrollBy(0, 200);
      document.getElementById("out").textContent = "interrupted: " + result.interrupted + " | scrollTop: " + section.scrollTop;
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element.scrollBy — page down scrollBy(0, 200) (Try It)