iscroll.js--スクロールローディングの例

<div class=" saleRecord panelList clear" style="position:relative;height:400px;">
                    <div id="wrapper">
	                    <div id="scroller">
		                    <ul id="thelist">
                    @foreach (var item in ViewBag.***)
                    {
                        if (item.IsPay == true)
                        {
                            <li>
                    <div class="panelListItemForALL">
                        <table class="allRecordTable">
                            <tbody>
                                <tr>
                                    <td>***</td>
                                    <td>@item.***</td>
                                </tr>
                                <tr>
                                    <td>***</td>
                                    <td>@item.***</td>
                                </tr>
                                <tr>
                                    <td>***</td>
                                    <td>@item.***</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                            </li> 
                        }
                    }
                            </ul>
                            <div id="more">    </div>
	                </div>
                </div>

#wrapper {
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
}

#scroller {
	position: absolute;
	z-index: 1;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	width: 100%;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}
#more
        {
            text-align:center;
        }

var pagenum = 1, update = true, id=ID;
        var myScroll;
        setTimeout(function(){
            myScroll = new IScroll('#wrapper', { mouseWheel: true, click: true });
            myScroll.on('scrollEnd', function () {
                //console.log(this.y +"|||"+this.maxScrollY);
                //       ，       （     10px  ）
                if ((this.y - this.maxScrollY) == 0) {
                    getMore();
                }
            });
        },100 );
        
        function getMore() {
            var that = document.getElementById("more");
            pagenum++;
            $.ajax({
                url: '/***/getPage',
                data: {'currentPage':pagenum,'id':id},
                type: 'POST',
                datatype: "json",
                success: function (data) {
                    //alert(data);
                    var list = data.List;
                    if (list.length < 1) {
                        pagenum--; that.innerHTML = "       ..."; return;
                    }
                    var ul = document.getElementById("thelist");
                    for (var i = 0; i < list.length; i++) {
                        var str = "<li>";
                        str += "<div class=\"panelListItemForALL\"><table class=\"allRecordTable\"><tbody><tr><td>***</td><td>"+list[i].OrderCode+"</td>";
                        str += "</tr><tr><td>***</td><td>"+list[i].GoodsName+"</td></tr>";
                        str += "<tr><td>***</td><td>"+ data.DatatimeArray[i] +"</td>";
                        str += "</tr></tbody></table></div>";
                        str += "</li>";
                        ul.innerHTML += str;
                        myScroll.refresh();
                    }
                }
            });

        }