Breaking News: Grepper is joining You.com. Read the official announcement!

change it to have 5 items per page so instead of using the height of the page, use the heigh of the table element

Uninterested Unicorn answered on June 16, 2023 Popularity 1/10 Helpfulness 1/10

answer change it to have 5 items per page so instead of using the height of the page, use the heigh of the table element

change it to have 5 items per page so instead of using the height of the page, use the heigh of the table element

Comment

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Infinite Scroll</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    .container {
      max-width: 600px;
      margin: 0 auto;
    }

    .item {
      background-color: #f2f2f2;
      padding: 20px;
      margin-bottom: 10px;
    }

    table {
      height: 300px; /* Adjust the height as needed */
      overflow-y: auto;
    }

    .loading {
      text-align: center;
      padding: 20px;
      font-style: italic;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>Infinite Scroll</h1>
    <table id="scrollContainer">
      <tbody>
        <!-- Content will be dynamically added here -->
      </tbody>
    </table>
    <div id="loading" class="loading">Loading...</div>
  </div>

  <script>
    const scrollContainer = document.getElementById("scrollContainer");
    const loadingDiv = document.getElementById("loading");

    let currentPage = 1;
    let isLoading = false;

    function fetchData(page) {
      isLoading = true;
      loadingDiv.style.display = "block";

      // Simulating an API call with a delay
      setTimeout(() => {
        const itemsPerPage = 5;
        const start = (page - 1) * itemsPerPage + 1;
        const end = page * itemsPerPage;

        const tbody = scrollContainer.querySelector("tbody");

        for (let i = start; i <= end; i++) {
          const row = document.createElement("tr");
          const cell = document.createElement("td");
          cell.className = "item";
          cell.textContent = "Item " + i;
          row.appendChild(cell);
          tbody.appendChild(row);
        }

        isLoading = false;
        loadingDiv.style.display = "none";
      }, 1000);
    }

    function handleScroll() {
      const { scrollTop, clientHeight, scrollHeight } = scrollContainer;

      if (scrollTop + clientHeight >= scrollHeight - 5 && !isLoading) {
        currentPage++;
        fetchData(currentPage);
      }
    }

    fetchData(currentPage);
    scrollContainer.addEventListener("scroll", handleScroll);
  </script>
</body>

</html>

Popularity 1/10 Helpfulness 1/10 Language html

Source: chat.openai.com

Tags: element height html items using

Link to this answer
Share Copy Link

Contributed on Jun 16 2023

Uninterested Unicorn

0 Answers Avg Quality 2/10

change it to have 5 items per page so instead of using the height of the page, use the heigh of the table element

Contents

More Related Answers

change it to have 5 items per page so instead of using the height of the page, use the heigh of the table element

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.