iScroll.js 向上滑动异步加载数据回弹问题

iScroll是一款用于移动设备web开发的一款插件。像缩放、下拉刷新、滑动切换等移动应用上常见的一些效果都可以轻松实现。

现在最新版本是5.X，官网这里：http://iscrolljs.com/

下面是按照官网给的Demo，写的一个异步加载数据实例：

<title>iScroll demo: click</title>
<script src="~/Scripts/iscroll5/jquery-1.10.2.js"></script>
<script src="~/Scripts/iscroll5/iscroll-probe.js"></script>
<script type="text/javascript">
    $(function () {
        upajaxload();

        var myScroll = new IScroll('#wrapper', {
            mouseWheel: false,  //是否监听鼠标滚轮事件
            bounceTime: 600,       //弹力动画持续的毫秒数
            probeType: 3
        });

        var handle = 0;//初始为0，无状态；1表示下拉，2表示上拉
        myScroll.on('scroll', function () {
            if (this.y > 5) {
                handle = 1;
            } else if (this.y < (this.maxScrollY - 5)) {
                handle = 2;

            };
        });

        function upajaxload() {
            $.ajax({ 28                 type: 'POST',
                url: '/Home/GetData',
                success: function (data) {
                    $(data).each(function (i, d) {
                        $("#scroller").append('<p>' + d + '</p>');
                    });
                }
            }); 39         };

        myScroll.on('scrollEnd', function () {
            if (handle === 2) {
                upajaxload();
            }
            handle = 0;
            myScroll.refresh();
        });
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    });
</script>

<style type="text/css">
    #header {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        height: 45px;
        line-height: 45px;
        background: #CD235C;
        padding: 0;
        color: #eee;
        font-size: 20px;
        text-align: center;
        font-weight: bold;
    }

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

    #scroller {
        position: absolute;
        z-index: 1;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        width: 2000px;
        -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;
        background: #fff;
    }

    p {
        font-size: 16px;
        padding: 1.2em;
    }
</style>
<div id="header">iScroll</div>

<div id="wrapper">
    <div id="scroller">
    </div>
</div>

上面的Demo有个问题，就是每次向上滑动结束之后，异步加载完成数据，再向上滑动查看加载的数据时，滑不上去，会回弹。

初步判断是Ajax异步加载修改了DOM结构导致的问题，去官网看了下也没说，自己摸索了一下，Ajax改成同步问题就解决。

    function upajaxload() {
            $.ajax({
                async: false,
                type: 'POST',
                url: '/Home/GetData',
                success: function (data) {
                    $(data).each(function (i, d) {
                        $("#scroller").append('<p>' + d + '</p>');
                    });
                }
            });
        };

改成同步，问题解决。