Untitled

unknown
javascript
2 years ago
4.6 kB
Indexable
Never
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
      integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- <div class="row"> -->
    <div id="page">
      <div class="listItems">
        <!== list data here --!>
        <div class="card" style="margin: 20px">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis,
            dicta? Illum velit et dolor quam esse recusandae voluptates
            laboriosam porro voluptatem necessitatibus repellat, ullam, optio,
            cupiditate ducimus. Modi, odio? Consectetur!
          </p>
        </div>
        <div class="card" style="margin: 20px">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis,
            dicta? Illum velit et dolor quam esse recusandae voluptates
            laboriosam porro voluptatem necessitatibus repellat, ullam, optio,
            cupiditate ducimus. Modi, odio? Consectetur!
          </p>
        </div>
        <div class="card" style="margin: 20px">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis,
            dicta? Illum velit et dolor quam esse recusandae voluptates
            laboriosam porro voluptatem necessitatibus repellat, ullam, optio,
            cupiditate ducimus. Modi, odio? Consectetur!
          </p>
        </div>
        <div class="card" style="margin: 20px">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis,
            dicta? Illum velit et dolor quam esse recusandae voluptates
            laboriosam porro voluptatem necessitatibus repellat, ullam, optio,
            cupiditate ducimus. Modi, odio? Consectetur!
          </p>
        </div>
        <div class="card" style="margin: 20px">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis,
            dicta? Illum velit et dolor quam esse recusandae voluptates
            laboriosam porro voluptatem necessitatibus repellat, ullam, optio,
            cupiditate ducimus. Modi, odio? Consectetur!
          </p>
        </div>
        <div class="card" style="margin: 20px">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis,
            dicta? Illum velit et dolor quam esse recusandae voluptates
            laboriosam porro voluptatem necessitatibus repellat, ullam, optio,
            cupiditate ducimus. Modi, odio? Consectetur!
          </p>
        </div>
        <div class="card" style="margin: 20px">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis,
            dicta? Illum velit et dolor quam esse recusandae voluptates
            laboriosam porro voluptatem necessitatibus repellat, ullam, optio,
            cupiditate ducimus. Modi, odio? Consectetur!
          </p>
        </div>
        <div class="card" style="margin: 20px">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis,
            dicta? Illum velit et dolor quam esse recusandae voluptates
            laboriosam porro voluptatem necessitatibus repellat, ullam, optio,
            cupiditate ducimus. Modi, odio? Consectetur!
          </p>
        </div>
      </div>
      <div class="lastPageItems" next="1"></div>
    </div>
    <!-- </div> -->

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

    <script>
      // $(document).ready(function () {
      // console.log("hello world data");

      $("div#page").scroll(function (e) {
        if ($(".lastPageItems").isOnScreen()) {
          // The element is visible, do something
          nextPage = $(".lastPageItems").attr("next");

          // load next data here & append to $('.listItems')
          // doLoadData(nextPage);
          alert(nextPage);
          console.log("panggil data lagi");
          // console.log("panggil data berikutnya");
        }
      });
      // });

      function doLoadData(params) {
        console.log("load data data data");
      }
    </script>
  </body>
</html>