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({                 type: 'POST',
url: '/Home/GetData',
success: function (data) {
$(data).each(function (i, d) {
$("#scroller").append('<p>' + d + '</p>');
});
}
});         };

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>');
});
}
});
};

改成同步，问题解决。