首先对iscroll的scrollTo方法进行稍微修改如下图：
对iscroll滑动到屏幕边缘不能弹回的bug进行修复，如下代码：
function scrollbug() {
var self = this;
if (this.maxScrollY - this.y > 50) {
var load = $(self.wrapper).find("div.load-more");
load.find("span.load-text").text("放开加载跟多");
load.find("span.down-icon").removeClass("up-icon");
} else {
var load = $(self.wrapper).find("div.load-more");
load.find("span.load-text").text("上拉加载更多");
load.find("span.down-icon").addClass("up-icon");
}
if (self.y > 50) {
var load=$(self.wrapper).find("div.load-refresh");
load.find("span.load-text").text("放开刷新");
load.find("span.down-icon").addClass("up-icon");
} else {
var load = $(self.wrapper).find("div.load-refresh");
load.find("span.load-text").text("下拉刷新");
load.find("span.down-icon").removeClass("up-icon");
}
///修复代码
if ((self.y <= self.maxScrollY) && (self.pointY < 45) && self.options.border) {
self.options.border = false;
self.scrollTo(0, self.maxScrollY, 400);
setTimeout(function () { self.options.border = true; }, 400);
return false;
} else if (self.y > 0 && (self.pointY > window.innerHeight - 1) && self.options.border) {
self.options.border = false;
self.scrollTo(0, 0, 400);
setTimeout(function () { self.options.border = true; }, 400);
return false;
}
};
html代码结构如下：
<section class="s-content" id="scroller">
<div class="scroller">
<div class="load-refresh" style="background-color: transparent;">
<span class="down-icon"></span><span class="load-text">下拉刷新</span>
</div>
<ul class="text-list" >
</ul>
<div class="load-more">
<span class="down-icon"></span><span>上拉加载更多</span>
</div>
</div>
</section >
js代码：
//border用于判断是否复原到顶部或底部，用于避免多次触发。
document.body.onload = function () {
var option = { probeType: 1, mouseWheel: true, fadeScrollbars: false, click: true, tap: true, border: true };
myScroll = new IScroll('#scroller', option);
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
myScroll.on("scroll", scrollbug);
myScroll.on("slideDown", function () {
var self = this;
if (self.y > 50) {
var load = $(self.wrapper).find("div.load-refresh");
self.scrollTo(0, 50);
setTimeout(function () { load.find("span.down-icon").addClass("load-icon"); }, 150);
$("#page-content").addClass("loading");
setTimeout(function () { load.find("span.load-text").text("加载中，请稍后..."); }, 100);
window.location.reload(true);
}
});
myScroll.on("slideUp", function () {
var self = this;
if (self.maxScrollY - self.y > 50) {
var bottom = +self.maxScrollY, load = $(self.wrapper).find("div.load-more");
var pages = $("#activity-list").attr("data-page");
if (pages != "ok") {//pages 页码如果是ok这表示是最后一页
self.scrollTo(0, bottom - 50);
load.find("span.down-icon").addClass("load-icon");
$("body").addClass("loading");
setTimeout(function () { load.find("span.load-text").text("加载中，请稍后..."); }, 100);
pages = pages ? pages : 1;
toPage({ pageNO: ++pages });
}
}
}); };
css样式：
.s-content{
position:relative;
overflow:hidden;
width: 100%;
-ms-touch-action: none;
z-index:999999;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,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;
}
.scroller {
position: absolute;
width: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-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;
z-index:1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}