JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

<div data-role="page">
<div data-role="content">
    <ul data-role="listview">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
    </ul>
</div>
</div>

JavaScript

var timer    = setInterval(function () {
        scrollOK = true;
    }, 100),
    scrollOK = true,
    count    = 20;
$(window).bind('scroll', function () {
    if (scrollOK) {
        scrollOK = false;
        if ($(this).scrollTop() + $(this).height() >= ($(document).height() - 100)) {
            //now load more list-items because the user is within 100px of the bottom of the page
            console.log('You Hit Bottom!');
            var out = [];
            for (var i = 0; i < 10; i++) {
                out.push('<li>' + (count++) + '</li>');
            }
            $('ul').append(out.join('')).listview('refresh');
        }
    }
});