demo/index.html

<!doctype html>
<html>

<head>
  <title>vscroll demo</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="./assets/styles.css">
  <script src="https://cdn.jsdelivr.net/npm/vscroll/dist/bundles/vscroll.umd.js"></script>
</head>

<body>
  <div id="header_wrap" class="outer">
    <header class="inner">
      <h1 id="project_title">VScroll Demo</h1>
      <h2 id="project_tagline">
        <a href="https://www.npmjs.com/package/vscroll"><img width="65" src="./assets/npm-logo.png"></a>
        <a href="https://github.com/dhilt/vscroll"><img width="100" src="./assets/github-logo.png"></a>
      </h2>
    </header>
  </div>
  <div id="main_content_wrap" class="outer">
    <section id="main_content" class="inner">
      <div class="row">
        <div class="column">
          <div class="viewport">
            <div id="vscroll">
              <div data-padding-backward></div>
              <div data-padding-forward></div>
            </div>
          </div>
        </div>
        <div class="column">
          <p id="vscroll-core-version"> </p>
          <p>
            This is a minimal working demo of a virtual scroll list
            rendering an unlimited data in runtime.
            Created with the vscroll module.
            Its full source code can be taken from
            <a href="https://github.com/dhilt/vscroll/blob/main/demo/index-minimal.html">index-minimal.html</a>.
          </p>
          <p>
            Another minimal demo is for table layout: <a href="./table-demo.html">table-demo.html</a>.
          </p>
        </div>
      </div>
    </section>
  </div>
  <div id="footer_wrap" class="outer">
    <footer class="inner">
      <p class="copyright">2024 © <a href="https://github.com/dhilt">Denis Hilt</a></p>
    </footer>
  </div>
  <script src="./index.js"></script>
</body>

</html>