Infinite Scroll

by aybalasubramanian

HTML

<div id="scroll_guide"></div>
<div id="console"></div>

<h1>This is the results</h1>
<div id="result_wrapper">
  <div class="block">Testing</div>
  <div class="block">Testing</div>
  <div class="block">Testing</div>
  <p class="clear">.</p>
</div>
<div id="footer">This is the footer of the page</div>

CSS

body {
  font-family: sans-serif;
  font-size: 10pt;
  position: relative;
  padding: 10px 0 0;
}

h1 {
  font-size: 150%;
  font-weight: bold;
  margin: 0 10px;
}

p.clear {
  height: 1px;
  clear: both;
  overflow: hidden;
  color: red;
}

div#scroll_guide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 250px;
  background-color: #DDF;
  z-index: -1;
}

div#console {
  padding: 3px;
  border: solid 1px #300;
  background: #FFF;
  font-size: 8pt;
  margin: 0 10px 2em;
  height: 100px;
  overflow: auto;
}

div.block {
  display: block;
  width: 100px;
  border: solid 1px #AAA;
  height: 100px;
  float: left;
  margin: 3px;
  background-color: orange;
  text-align: center;
}

div#result_wrapper {
  background-color: #DDD;
  width: 568px;
  margin: 0 auto;
}

div#result_wrapper p {
  margin-left: 10px;
  font-weight: bold;
}

div#footer {
  font-size: 8pt;
  margin: 10px 5px 0;
  font-style: italic;
}

JavaScript

var contentHeight = 250; // What is the height of the static content of the page?
var curPage = 1; // What virtual 'page' of results are we on?
var $console; // For showing debug info

// Show a console message
function log(msg) {
  $console.append('<p>' + msg + '</p>');
  $console.animate({
    scrollTop: 99999
  }, "fast"); // Scroll to bottom
}

// Calculate the height of the scroll target based on page content
function calcScrollTarget() {
  var windowHeight = document.documentElement.clientHeight;
  var bodyHeight = $(document).height();
  var delta = bodyHeight - windowHeight - 50;
  log('Scroll target: ' + bodyHeight + ' (body content) - ' + windowHeight + ' (browser height) - 50 (buffer) = ' + delta);
  contentHeight = delta; // Update target amount
  $('div#scroll_guide').height(delta); // Update guide
}

// Load the next page of content
function loadContent() {
  if (curPage >= 7) {
    // Cap results
    contentHeight = 999999; // Move scroll target past end of page
  } else {
    // Simulate new results
    // In reality this would be an AJAX call, likely
    curPage++; // Next page
    var $result = $('div#result_wrapper').append('<p>xxx ' + curPage + '</p>');
    for (var i = 1; i <= 24; i++) {
      $result.append('<div class="block">Page ' + curPage + ', number ' + i + '</div>');
    }
    $result.append('<p class="clear">.</p>');
    calcScrollTarget(); // Update scroll target
  }
}

$(document).ready(function() {
  $console = $('div#console'); // Store for future use
  // Create initial results
  var $result = $('div#result_wrapper').html('');
  for (var i = 1; i <= 24; i++) {
    $result.append('<div class="block">Result ' + i + '</div>');
  }
  $result.append('<p class="clear">.</p>');

  calcScrollTarget(); // Set initial scroll target
  $(window).resize(calcScrollTarget); // If browser size changes, recalculate scroll target

  // monitor the window's scroll event
  $(window).scroll(function() {
    //log("Scroll detected:...