Infinite scroll

Loading additional content on the page when scrolling down.

In the example below, a list of contact cards (using Bootstrap styling) is shown. Initially, 4 cards are loaded.

The list ends with a DIV element with an ifinview-load attribute containing an URL to the next 4 cards. As soon as this DIV element is in the viewport (the visible area of the page within the browser), the URL is requested and its response will replace the DIV element. As long as not all cards have been loaded, that response will contain cards followed by an element with an ifinview-load attribute containing an URL to load the next cards:

<div class="row pb-3">
  <div class="col">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">1 A Bike Store</h5>
        <h6 class="card-subtitle mb-2 text-muted">Orlando Gee</h6>
        <p class="card-text">245-555-0173</p>
      </div>
    </div>
  </div>
  <div class="col">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">2 Progressive Sports</h5>
          <h6 class="card-subtitle mb-2 text-muted">Keith Harris</h6>
          <p class="card-text">170-555-0127</p>
        </div>
      </div>
  </div>
</div>
<div class="row pb-3">
  <div class="col">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">3 Advanced Bike Components</h5>
        <h6 class="card-subtitle mb-2 text-muted">Donna Carreras</h6>
        <p class="card-text">279-555-0130</p>
      </div>
    </div>
  </div>
  <div class="col">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">4 Modular Cycle Systems</h5>
          <h6 class="card-subtitle mb-2 text-muted">Janet Gates</h6>
          <p class="card-text">710-555-0173</p>
        </div>
      </div>
  </div>
</div>
<div ifinview-load="/Contacts/Cards?toskip=4" target-method="replace">
  Loading more...
</div>

The response to the request is not inserted as new content of the DIV element but replaces the DIV element. This is the result of the target-method attribute that instructs to replace the element.

The data rendered in the list is issued from the Microsoft AdventureWorksLT database.