examples/scrollable-cards.html at main · cdpdriver/examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
  <head>
    <title>Infinite Scrolling Demo - Zendriver</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <style>
      body {
        background-color: #f5f5f5;
      }

      .card {
        transition: all 0.3s ease;
        margin-bottom: 1.5rem;
      }

      .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
      }

      .card-title {
        color: #1976d2;
        font-weight: 500;
      }

      .card-text {
        color: rgba(0, 0, 0, 0.87);
      }

      #card-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 2rem 1.25rem;
      }

      .loading {
        text-align: center;
        padding: 1.5rem;
        color: rgba(0, 0, 0, 0.54);
        font-size: 0.875rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
      }

      .spinner-border {
        width: 1.5rem;
        height: 1.5rem;
        color: #1976d2;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1 class="text-center mt-4 mb-4">Infinite Scrolling Demo</h1>
      <p class="text-center mb-4" style="max-width: 600px; margin: 0 auto">
        This is a demo page for
        <a href="https://github.com/stephanlensky/zendriver">Zendriver</a>
        to show how to scrape a website with infinite scrolling. Scroll down to
        card 27 to see the lucky card.
      </p>
      <div id="card-container"></div>
      <div class="loading">
        Loading more cards
        <div class="spinner-border" role="status">
          <span class="visually-hidden">Loading...</span>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      let cardCount = 0;
      let isLoading = false;
      const cardsToLoad = 10;

      function createCard() {
        const card = document.createElement("div");
        card.className = "card";
        cardCount++;
        if (cardCount === 27) {
          card.innerHTML = `
            <div class="card-body">
              <h5 class="card-title">Card ${cardCount}</h5>
              <p class="card-text">This is card number ${cardCount} in the infinite scroll demo.</p>
              <p class="card-text">Congratulations, you found the lucky card!</p>
            </div>`;
        } else {
          card.innerHTML = `
            <div class="card-body">
              <h5 class="card-title">Card ${cardCount}</h5>
              <p class="card-text">This is card number ${cardCount} in the infinite scroll demo.</p>
              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>`;
        }
        return card;
      }

      function loadMoreCards() {
        if (isLoading) return;

        isLoading = true;
        // Simulate network delay
        setTimeout(() => {
          const container = document.getElementById("card-container");
          // Add new cards
          for (let i = 0; i < cardsToLoad; i++) {
            container.appendChild(createCard());
          }
          isLoading = false;

          // Check if we need to load more after adding cards
          checkAndLoadMore();
        }, 1000);
      }

      function checkAndLoadMore() {
        // Load more if the content doesn't fill the viewport
        if (document.body.offsetHeight <= window.innerHeight) {
          loadMoreCards();
        }
      }

      // Initial load
      loadMoreCards();

      // Detect scroll and load more
      window.addEventListener("scroll", () => {
        if (
          window.innerHeight + window.scrollY >=
          document.body.offsetHeight - 500
        ) {
          loadMoreCards();
        }
      });

      // Also check when window is resized
      window.addEventListener("resize", checkAndLoadMore);
    </script>
  </body>
</html>