HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scroll section</title>
  <style>
    body { font-family: sans-serif; margin: 1rem; }
    section {
      width: 300px; height: 200px; overflow-y: scroll;
      scroll-behavior: smooth;
      border: 2px solid #1e40af; border-radius: 8px; padding: 0.75rem;
    }
    .scroll { 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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa.</p>
    <p>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio.</p>
    <p>Nullam varius, turpis et commodo pharetra, est eros bibendum elit.</p>
    <p>Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque.</p>
    <p>Adipiscing diam. Donec felis. Fusce aliquet quam eget velit.</p>
    <p>Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus.</p>
    <p>Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi.</p>
    <p>Aenean nec eros. Vestibulum ante ipsum primis in faucibus orci.</p>
  </section>
  <button type="button" class="scroll">Scroll section to y=1000</button>
  <pre id="out">interrupted: (click button)</pre>
  <script>
    var section = document.querySelector("section");
    document.querySelector(".scroll").addEventListener("click", async function () {
      var result = await section.scroll(0, 1000);
      document.getElementById("out").textContent = "interrupted: " + result.interrupted;
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element.scroll — overflow section demo (Try It)