JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://lab.cubiq.org/iscroll/src/iscroll.js"></script>
<div data-role="page" id="example_page_one">
    <div id="wrapper">
        <div id="scroller"></div>
    </div>
</div>

CSS

#wrapper {

    position:absolute;

    z-index:1;

    top:45px;

    bottom:48px;

    left:0;

    width:100%;

    height:100px;

    overflow:auto;

}

#scroller {

    position:absolute;

    z-index:1;

    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);

    width:100%;

    padding:0;

}

JavaScript

var myScroll;


// -- pageinit event that fires for SPECIFIC PAGE ONLY --
// -- this code is executed only once upon initital page load (or if it is no longer in the cache)
$(document).on("pageshow", "#example_page_one", function () {

    // iScroll uses the following in their examples but if we did that in a JQM
    // site then normal mobile scrolling would be disabled on EVERY PAGE :-(
    //      document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

    // Instead, we disable normal mobile scrolling for the JQM 'page' that we are using iScroll in
    $('#example_page_one').on('touchmove', function (e) {
        e.preventDefault;
    });

    // edit #2: will look for and alert when end of contents are reached
    myScroll = new iScroll('wrapper', {
        onScrollEnd: function () {
            if (($('#wrapper').offset().top - $('#scroller').offset().top) + $('#wrapper').height() >= $('#scroller').height()) {
                
                //alert('the end');
            }

        }
    });

});


setInterval(function () {
    $('#scroller').append("I M Rmesh test 123 want to scroll data ");
    myScroll.refresh();
    myScroll.scrollTo(0, myScroll.maxScrollY, 0);

}, 2000);