运用iscroll.js遇到的问题
时间： 12:13:57
&&&& 阅读：12645
&&&& 评论：
&&&& 收藏：0
标签：1.无法滑动的问题
　　需要检查iscroll.js文件加载上没有，如果加载上检查一下它和jquery文件加载的先后顺序。wrapper的position必须得写，bottom也必须得写。
2.滑不上去的问题
　　wrapper的height设置成了100%。所以出现这个问题，把这个属性去掉了好了
3.页面滑动不流畅（这样是暂时行可以，还没找到更好的解决办法）　　
&　&#scroller&{& & & & transform:&translate3d(0,0,0);& & & & -webkit-transform:&translate3d(0,0,0);& & & & -moz-transform:&translate3d(0,0,0);& & &}&
4.点击input框、select等表单元素时没有响应，这个问题原因在于iscroll需要一直监听用户的touch操作，以便灵敏的做出对应效果，所以它把其余的默认事件屏蔽了，解决的方法是，在iscroll4源码里面找到这一行，
&&&& onBeforeScrollStart: function (e) { e.preventDefault(); }
然后把它改成：&&& onBeforeScrollStart: function (e) { var nodeType = e.explicitOriginalTarget？ e.explicitOriginalTarget.nodeName.toLowerCase():(e.target？ e.target.nodeName.toLowerCase():‘‘);if(nodeType !=‘select‘&& nodeType !=‘option‘&& nodeType !=‘input‘&& nodeType!=‘textarea‘) e.preventDefault(); }
&&& 这样只要你touch的元素是 select || option || input || textarea时，它就不会执行e.preventDefault()，默认的事件就不会被屏蔽了。
&&& 如果你有其他不想被屏蔽的元素，可以自己修改，不过需要注意onBeforeScrollStart里的屏蔽默认事件很重要，它是iscroll进行流畅滚动的基础，不要随便的把它去掉，否则你会发现滚动起来很卡顿。
5.Iscroll异步加载DOM造成滑动不上去的问题
　　我实在ajax执行完成以后重新加载一次iscroll，myScroll.refresh();
用iscroll5实现的页面初始化加载到页面最底部，点击一个按钮最底部加载一条数据，并且实现下拉加载更多的效果，iscroll-probe.js是关键，
&!DOCTYPE html&
&meta charset="utf-8"&
&meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"&
&title&iScroll demo: probe&/title&
&script type="text/javascript" src="../build/iscroll-probe.js"&&/script&
&script src="jquery-2.0.2.min.js"&&/script&
&script type="text/javascript"&
var pullDownEl, pullDownL;
var pullUpEl, pullUpL;
var Downcount = 0 ,Upcount = 0;
var loadingStep = 0;//加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新
function pullDownAction() {//下拉事件
setTimeout(function() {
alert(‘ook‘)
pullDownEl.removeClass(‘loading‘);
pullDownL.html(‘下拉显示更多...‘);
pullDownEl[‘class‘] = pullDownEl.attr(‘class‘);
pullDownEl.attr(‘class‘,‘‘).hide();
myScroll.refresh();
loadingStep = 0;
}, 1000); //1秒
function pullUpAction() {//上拉事件
setTimeout(function() {
/* var el, li,
el = $(‘#add‘);
for (i = 0; i & 3; i++) {
li = $("&li&&/li&");
Upcount++;
li.text(‘new Add ‘ + Upcount + " ！");
el.append(li);
pullUpEl.removeClass(‘loading‘);
pullUpL.html(‘上拉显示更多...‘);
pullUpEl[‘class‘] = pullUpEl.attr(‘class‘);
pullUpEl.attr(‘class‘,‘‘).hide();
myScroll.refresh();
loadingStep = 0;
function loaded() {
pullDownEl = $(‘#pullDown‘);
pullDownL = pullDownEl.find(‘.pullDownLabel‘);
pullDownEl[‘class‘] = pullDownEl.attr(‘class‘);
pullDownEl.attr(‘class‘,‘‘).hide();
pullUpEl = $(‘#pullUp‘);
pullUpL = pullUpEl.find(‘.pullUpLabel‘);
pullUpEl[‘class‘] = pullUpEl.attr(‘class‘);
pullUpEl.attr(‘class‘,‘‘).hide();
myScroll = new IScroll(‘#content‘, {
probeType: 2,
scrollbars: true,//有滚动条
mouseWheel: true,//允许滑轮滚动
fadeScrollbars: true,//滚动时显示滚动条，默认影藏，并且是淡出淡入效果
bounce:true,//边界反弹
interactiveScrollbars:true,//滚动条可以拖动
shrinkScrollbars:‘scale‘,// 当滚动边界之外的滚动条是由少量的收缩。‘clip‘ or ‘scale‘.
click: true ,// 允许点击事件
keyBindings:true,//允许使用按键控制
momentum:true// 允许有惯性滑动
myScroll.scrollToElement(document.querySelector(‘#scroller li:last-child‘))
//页面初始化显示最后一条数据
myScroll.on(‘scroll‘, function(){
if(loadingStep == 0 && !pullDownEl.attr(‘class‘).match(‘flip|loading‘) && !pullUpEl.attr(‘class‘).match(‘flip|loading‘)){
if (this.y & 5) {
//下拉刷新效果
pullDownEl.attr(‘class‘,pullUpEl[‘class‘])
pullDownEl.show();
myScroll.refresh();
pullDownEl.addClass(‘flip‘);
loadingStep = 1;
}else if (this.y & (this.maxScrollY - 5)) {
//上拉刷新效果
pullUpEl.attr(‘class‘,pullUpEl[‘class‘])
pullUpEl.show();
myScroll.refresh();
pullUpEl.addClass(‘flip‘);
loadingStep = 1;
//滚动完毕
myScroll.on(‘scrollEnd‘,function(){
if(loadingStep == 1){
if (pullUpEl.attr(‘class‘).match(‘flip|loading‘)) {
pullUpEl.removeClass(‘flip‘).addClass(‘loading...‘);
pullUpL.html(‘Loading...‘);
loadingStep = 2;
pullUpAction();
}else if(pullDownEl.attr(‘class‘).match(‘flip|loading‘)){
pullDownEl.removeClass(‘flip‘).addClass(‘loading...‘);
pullDownL.html(‘Loading...‘);
loadingStep = 2;
pullDownAction();
document.addEventListener(‘touchmove‘, function (e) { e.preventDefault(); }, false);
$(function(){
$(‘#footer a‘).click(function(){
var el, li,
el = $(‘#add‘);
for (i = 0; i & 3; i++) {
li = $("&li&&/li&");
Upcount++;
li.text(‘new Add ‘ + Upcount + " ！");
el.append(li);
myScroll.refresh();
$(‘.delete‘).click(function(){
$(‘#add li:last-child‘).remove();
myScroll.refresh();
&style type="text/css"&
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-touch-action: none;
body,ul,li {
padding: 0;
margin: 0;
border: 0;
font-size: 12px;
font-family: ubuntu, helvetica, arial;
overflow: hidden;
/* this is important to prevent the whole page to bounce */
position: absolute;
z-index: 2;
width: 100%;
height: 45px;
line-height: 45px;
background: #CD235C;
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
font-weight: bold;
position: absolute;
z-index: 2;
bottom: 0;
width: 100%;
height: 48px;
background: #444;
padding: 0;
border-top: 1px solid #444;
#footer a {
width: 50%;
display: block;
float: left;
text-align: center;
line-height: 48px;
color: #fff;
font-size: 16px
#content {
position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
width: 100%;
background: #ccc;
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;
#scroller ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
#scroller li {
padding: 0 10px;
height:<span style="background-color: #f5f5f5; color: #px;
line-height: 40px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
background-color: #fafafa;
font-size: 14px;
#pullDown, #pullUp {
background:#fff;
height:40px;
line-height:40px;
padding:5px 10px;
border-bottom:1px solid #ccc;
font-weight:bold;
font-size:14px;
color:#888;
#pullDown .pullDownIcon, #pullUp .pullUpIcon
display:block; float:left;
width:40px; height:40px;
background:url() 0 0 no-repeat;
-webkit-background-size:40px 80px; background-size:40px 80px;
-webkit-transition-property:-webkit-transform;
-webkit-transition-duration:<span style="background-color: #f5f5f5; color: #ms;
#pullDown .pullDownIcon {
-webkit-transform:rotate(0deg) translateZ(0);
#pullUp .pullUpIcon
-webkit-transform:rotate(-180deg) translateZ(0);
#pullDown.flip .pullDownIcon {
-webkit-transform:rotate(-180deg) translateZ(0);
#pullUp.flip .pullUpIcon {
-webkit-transform:rotate(0deg) translateZ(0);
#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
background-position:<span style="background-color: #f5f5f5; color: #%;
-webkit-transform:rotate(0deg) translateZ(0);
-webkit-transition-duration:0ms;
-webkit-animation-name:loading;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
@-webkit-keyframes loading {
from { -webkit-transform:rotate(0deg) translateZ(0); }
to { -webkit-transform:rotate(360deg) translateZ(0); }
&body onload="loaded()"&
&div id="header"&&a href="javascript:myScroll.scrollToElement(document.querySelector(‘#scroller li:last-child‘))"&Scroll&/a&&/div&
&div id="content"&
&div id="scroller"&
&div id="pullDown" class="ub ub-pc c-gra"&
&div class="pullDownIcon"&&/div&
&div class="pullDownLabel"&Loading...&/div&
&ul id="add"&
&li&&a href="#"&Scroll to element 10&/a&&/li&
&li&&input type="text" value="测试" id="test" disabled="disabled"&&/li&
&li&Pretty row 1&/li&
&li&Pretty row 2&/li&
&li&Pretty row 3&/li&
&li&Pretty row 4&/li&
&li&Pretty row 5&/li&
&li&Pretty row 6&/li&
&li&Pretty row 7&/li&
&li&Pretty row 8&/li&
&li&Pretty row 9&/li&
&li&Pretty row 10&/li&
&div id="pullUp" class="ub ub-pc c-gra"&
&div class="pullUpIcon"&&/div&
&div class="pullUpLabel"&上拉显示更多...&/div&
&div id="footer"&
&a href="javascript:myScroll.scrollToElement(document.querySelector(‘#scroller li:last-child‘))"&添加&/a&
&a style="display:cursor:" class="delete"&删除&/a&
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！iScroll 实例：下拉刷新，滚动翻页
下拉刷新...
Pretty row 1
Pretty row 2
Pretty row 3
Pretty row 4
Pretty row 5
Pretty row 6
Pretty row 7
Pretty row 8
Pretty row 9
Pretty row 10
Pretty row 11
Pretty row 12
Pretty row 13
Pretty row 14
Pretty row 15
Pretty row 16
Pretty row 17
Pretty row 18
Pretty row 19
Pretty row 20
Pretty row 21
Pretty row 22
Pretty row 23
Pretty row 24
Pretty row 25
Pretty row 26
Pretty row 27
Pretty row 28
Pretty row 29
Pretty row 30
Pretty row 31
Pretty row 32
Pretty row 33
Pretty row 34
Pretty row 35
Pretty row 36
Pretty row 37
Pretty row 38
Pretty row 39
Pretty row 40
上拉加载更多...匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。JQuery插件iScroll实现下拉刷新，滚动翻页特效
投稿：hebedich
字体：[ ] 类型：转载 时间：
下拉自动加载进行分页的运用越来越多，比起传统的分页该方法分页用户体验更好，布局也更简单了。目前正在使用和学习中……
JQuery插件：iScroll
页面布局：
&div id="wrapper"&
&div id="scroller"&
&div id="pullDown"&
&span class="pullDownIcon"&&/span&&span class="pullDownLabel"&下拉刷新...&/span&
&ul id="thelist"&
&img src="img/page1_img1.jpg" /&
&img src="img/page1_img2.jpg" /&
&img src="img/page1_img3.jpg" /&
&img src="img/page1_img1.jpg" /&
&img src="img/page1_img2.jpg" /&
&img src="img/page1_img3.jpg" /&
&div id="pullUp"&
&span class="pullUpIcon"&&/span&&span class="pullUpLabel"&上拉加载更多...&/span&
翻页，是通过ajax请求，把页码传入一般处理程序，在一般处理程序中获得分页后的数据返回json数组对象。
下拉刷新：
* 下拉刷新 （自定义实现此方法）
* myScroll.refresh(); // 数据加载完成后，调用界面更新方法
function pullDownAction() {
setTimeout(function () {
var el, li,
el = document.getElementById('thelist');
//==========================================
type: "GET",
url: "LoadMore.ashx",
data: { page: generatedCount },
dataType: "json",
success: function (data) {
var json =
$(json).each(function () {
li = document.createElement('li');
// li.innerText = 'Generated row ' + (++generatedCount);
li.innerHTML = '&img src="' + this.src + '"/&';
el.insertBefore(li, el.childNodes[0]);
myScroll.refresh(); //数据加载完成后，调用界面更新方法
Remember to refresh when contents are loaded (ie: on ajax completion)
// &-- Simulate network congestion, remove setTimeout from production!
function pullUpAction() {
setTimeout(function () {
var el, li,
el = document.getElementById('thelist');
//==========================================
type: "GET",
url: "LoadMore.ashx",
data: { page: generatedCount },
dataType: "json",
success: function (data) {
var json =
$(json).each(function () {
li = document.createElement('li');
li.innerText = 'Generated row ' + (++generatedCount);
li.innerHTML = '&img src="' + this.src + '"/&;
el.insertBefore(li, el.childNodes[0]);
//============================================
myScroll.refresh(); // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // &-- Simulate network congestion, remove setTimeout from production!
* 初始化iScroll控件
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetH
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetH
myScroll = new iScroll('wrapper', {
scrollbarClass: 'myScrollbar', /* 重要样式 */
useTransition: false,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
onScrollMove: function () {
if (this.y & 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
this.minScrollY = 0;
} else if (this.y & 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
this.minScrollY = -pullDownO
} else if (this.y & (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
this.maxScrollY = this.maxScrollY;
} else if (this.y & (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
this.maxScrollY = pullUpO
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
pullDownAction(); // Execute custom function (ajax call&#63;)
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
pullUpAction(); // Execute custom function (ajax call&#63;)
setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
//初始化绑定iScroll控件
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具iScroll是一款用于移动设备web开发的一款插件。像缩放、下拉刷新、滑动切换等移动应用上常见的一些效果都可以轻松实现。
现在最新版本是5.X，官网这里：
下面是按照官网给的Demo，写的一个异步加载数据实例：
1 &title&iScroll demo: click&/title&
2 &script src="~/Scripts/iscroll5/jquery-1.10.2.js"&&/script&
3 &script src="~/Scripts/iscroll5/iscroll-probe.js"&&/script&
4 &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&');
myScroll.on('scrollEnd', function () {
if (handle === 2) {
upajaxload();
handle = 0;
myScroll.refresh();
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
50 &/script&
52 &style type="text/css"&
position: absolute;
z-index: 2;
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;
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;
font-size: 16px;
padding: 1.2em;
107 &/style&
108 &div id="header"&iScroll&/div&
110 &div id="wrapper"&
&div id="scroller"&
113 &/div&
上面的Demo有个问题，就是每次向上滑动结束之后，异步加载完成数据，再向上滑动查看加载的数据时，滑不上去，会回弹。
初步判断是Ajax异步加载修改了DOM结构导致的问题，去官网看了下也没说，自己摸索了一下，Ajax改成同步问题就解决。
function upajaxload() {
async: false,
type: 'POST',
url: '/Home/GetData',
success: function (data) {
$(data).each(function (i, d) {
$("#scroller").append('&p&' + d + '&/p&');
改成同步，问题解决。
阅读(...) 评论()}