HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scroll basic</title>
  <style>
    body { font-family: sans-serif; margin: 1rem; }
    #section {
      width: 280px; height: 160px; overflow-y: scroll;
      border: 2px solid #334155; border-radius: 8px; padding: 0.5rem;
    }
    .line { height: 40px; background: #e2e8f0; margin-bottom: 8px; border-radius: 4px; display: grid; place-items: center; }
    button { margin-top: 0.75rem; padding: 0.5rem 1rem; cursor: pointer; }
  </style>
</head>
<body>
  <section id="section">
    <div class="line">Line 1</div>
    <div class="line">Line 2</div>
    <div class="line">Line 3</div>
    <div class="line">Line 4</div>
    <div class="line">Line 5</div>
    <div class="line">Line 6</div>
    <div class="line">Line 7</div>
    <div class="line">Line 8</div>
    <div class="line">Line 9</div>
    <div class="line">Line 10</div>
    <div class="line">Line 11</div>
    <div class="line">Line 12</div>
    <div class="line">Line 13</div>
    <div class="line">Line 14</div>
    <div class="line">Line 15</div>
    <div class="line">Line 16</div>
    <div class="line">Line 17</div>
    <div class="line">Line 18</div>
    <div class="line">Line 19</div>
    <div class="line">Line 20</div>
    <div class="line">Line 21</div>
    <div class="line">Line 22</div>
    <div class="line">Line 23</div>
    <div class="line">Line 24</div>
    <div class="line">Line 25</div>
    <div class="line">Line 26</div>
    <div class="line">Line 27</div>
    <div class="line">Line 28</div>
    <div class="line">Line 29</div>
    <div class="line">Line 30</div>
  </section>
  <button type="button" id="go">scroll(0, 1000)</button>
  <p id="out">scrollTop: 0</p>
  <script>
    var section = document.getElementById("section");
    var out = document.getElementById("out");
    function show() {
      out.textContent = "scrollTop: " + section.scrollTop;
    }
    section.addEventListener("scroll", show);
    document.getElementById("go").addEventListener("click", function () {
      section.scroll(0, 1000);
      setTimeout(show, 50);
    });
  </script>
</body>
</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
Element.scroll — basic scroll(0, 1000) (Try It)
