iscroll实现h5锁定列和头，并且无限上划分页

js代码 

        var win = $(window),
            scrollAreaEl = $('.t_r_content'),
            leftFreezeEl = $('.t_l_freeze'),
            leftTableEl = leftFreezeEl.find('table'),
            rightTableEl = $('.t_r_t table');

        //动态计算容器最大高度
        function adjustHeight() {
            var winHeight = win.height(),
                tableHeight = winHeight - 90;
            leftFreezeEl.height(tableHeight);
            scrollAreaEl.height(tableHeight);
        }

        adjustHeight();
        win.on('resize', adjustHeight);

        //设置iscroll
        var myScroll = new IScroll(".t_r_content", {
            scrollbars: true,
            mouseWheel: true,
            interactiveScrollbars: true,
            shrinkScrollbars: 'scale',
            fadeScrollbars: true,
            scrollX: true,
            scrollY: true,
            probeType: 2,
            bindToWrapper: true
        });

        var pullDown = $("#pullDown"),
            pullUp = $("#pullUp"),
            pullDownLabel = $(".pullDownLabel"),
            pullUpLabel = $(".pullUpLabel"),
            container = $('#list'),
            container1 = $('#list1'),
            loadingStep = 0; //加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新

        pullDown.hide();
        pullUp.hide();


        //阻止默认滚动
        scrollAreaEl.on('touchmove mousewheel', function (e) {
            e.preventDefault();
        });

        //固定上左表头的滚动
        myScroll.on('scroll', updatePosition);
        myScroll.on('scrollEnd', updatePosition);

        var loadingStep = 0;
        function updatePosition() {
            var a = this.y;
            var b = this.x;
            leftTableEl.css('transform', 'translate(0px, ' + a + 'px) translateZ(0px)');
            rightTableEl.css('transform', 'translate(' + b + 'px, 0px) translateZ(0px)');

            if(loadingStep == 0 && !pullDown.attr("class").match('refresh|loading') && !pullUp.attr("class").match('refresh')) {
                console.log(this.y);
                if(this.y > 40) { //下拉刷新操作
                    $(".pulldown-tips").hide();
                    pullDown.addClass("refresh").show();
                    pullDownLabel.text("松手刷新数据");
                     loadingStep = 1;
                    console.log("下拉刷新操作");
                    pulldown();
                } else if(this.y < (this.maxScrollY - 14)) { //上拉加载更多
                    pullUp.addClass("refresh").show();
                    pullUpLabel.text("正在加载");
                    loadingStep = 1;
                    console.log("上拉加载更多");
                    pullUpAction();
                }
            }
        }


        /**
         * 上拉加载
         */
        function pullUpAction() {
            setTimeout(function() {
                var li, i;
                for(i = 0, li = ""; i < 3; i++) {
                    li += "<tr><td>" + "new Add " + i  + "</td><td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td></tr>";
                }
                container.append(li);

                var li1, j;
                for(j = 0, li1 = ""; j < 3; j++) {
                    li1 += "<tr><td>" + "new Add " + j + "</td></tr>";
                }
                container1.append(li1);

                pullUp.attr('class', '').hide();
                myScroll.refresh();
                loadingStep = 0;
            }, 1000);
        }

        /**
         * 下拉加载
         */
        function pulldown(){
            setTimeout(function() {
                pullDown.attr('class', '').hide();
                loadingStep = 0;
                myScroll.refresh();
            }, 1000);
        }

html

<div style="margin-top: 44px;">
        <div id="pullDown" class="">
            <div class="pullDownLabel"></div>
        </div>
        <div class="data-table">
            <div class="t_l">
                <table>
                    <tbody>
                    <tr>
                        <th>品类1</th>
                    </tr>
                    </tbody>
                </table>
                <div class="t_l_freeze">
                    <table id="list1">
                        <tr>
                            <td>品类1</td>
                        </tr>
                        <tr>
                            <td>男鞋2</td>
                        </tr>
                        <tr>
                            <td>男鞋</td>
                        </tr>
                        <tr>
                            <td>男鞋</td>
                        </tr>
                        <tr>
                            <td>男鞋</td>
                        </tr>
                        <tr>
                            <td>男鞋</td>
                        </tr>
                        <tr>
                            <td>男鞋</td>
                        </tr>
                        <tr>
                            <td>男鞋</td>
                        </tr>
                        <tr>
                            <td>男鞋</td>
                        </tr>
                        <tr>
                            <td>男鞋</td>
                        </tr>
                        <tr>
                            <td>男鞋</td>
                        </tr>
                        <tr>
                            <td>男鞋</td>
                        </tr>
                        <tr>
                            <td>男鞋</td>
                        </tr>
                        <tr>
                            <td>男鞋</td>
                        </tr>
                        <tr>
                            <td>男鞋</td>
                        </tr>
                        <tr>
                            <td>男鞋</td>
                        </tr>
                        <tr>
                            <td>男鞋AA</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="t_r">
                <div class="t_r_t">
                    <table>
                        <tbody>
                        <tr>
                            <th>1a</th>
                            <th>2b</th>
                            <th>3c</th>
                            <th>4d</th>
                            <th>5e</th>
                            <th>6f</th>
                            <th>7g</th>
                            <th>8h</th>
                            <th>9i</th>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="t_r_content">
                    <table>
                        <tbody id="list">
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td>8</td>
                            <td>9</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td>8</td>
                            <td>9</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td>8</td>
                            <td>9</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td>8</td>
                            <td>9</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td>8</td>
                            <td>9</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td>8</td>
                            <td>9</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td>8</td>
                            <td>9</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td>8</td>
                            <td>9</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td>8</td>
                            <td>9</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td>8</td>
                            <td>9</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td>8</td>
                            <td>9</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td>8</td>
                            <td>9</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td>8</td>
                            <td>9</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td>8</td>
                            <td>9</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td>8</td>
                            <td>9</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td>8</td>
                            <td>9</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                            <td>5</td>
                            <td>6</td>
                            <td>7</td>
                            <td>8</td>
                            <td>9</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div id="pullUp" class="">
            <div class="pullUpLabel">加载更多</div>
        </div>
    </div>