iScroll框架的使用和修改
iScroll 的诞生是因为手机 Webkit 浏览器（iPhone、iPod、Android 和 Pre）本身没有为固定宽度和高度的元素提供滚动内容的方法。这导致了很多网页使用 position:absolute 无法固定页头页尾，并对内容进行滚动的方式。而 iScroll 就是为了解决这个问题。
iscroll使用注意事项：
- 1, .scroll不要在css里设置高度,不然拖不动
- 2, #wrapper要设置position:relative,不然滚动条位置不对,不然不在容器内.
- 3. 如果不显示滚动条, 在.scroller加上 overflow: hidden;
- 4. 注意css文件是否是动态嵌入,如果是,要延时一下,再new iScroll(), 不然有可能因为没有加载css文件 ,从而.scroller高度为0.不显示滚动条.
iscroll使用案例
补充1： 异步加载DOM造成的高度问题造成iScroll不能滚动（http://www.68idc.cn/help/makewebs/html5/2013122363788.html）
原因：动态数据还没有append完成.该showResult 还没有加载完成,就开始 new iScroll("XXXX")了
/** * 初始化显示结果层的高度,iScroll渲染 */
var initScroll = function () {
intervalTime = setInterval(function () {
var resultContentH = $("#showResult").height();
if (resultContentH > 0) {
//判断数据加载完成的条件
console.log("此时showResult的高度是:" + resultContentH);
$("#showResult").height(resultContentH);
setTimeout(function () {
clearInterval(intervalTime);
myScroll = new iScroll('resultContent');
}, 100);
}
}, 10);
}
1、iscroll遇到Select不能选择下拉的处理
禁止select等页面元素默认事件的解决方法，起因在于_start() function的195行
onBeforeScrollStart:function(e){ e.preventDefault();},
这一行，iSroll禁止了事件的默认行为，导致select，option，textarea等元素无法点击。
解决方法也很简单，只需做一下判断，如下：
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进行流畅滚动的基础，不要随便的把它去掉，否则你会发现滚动起来很卡顿。
或者，在handleTarget函数方法开始加入：
var theTarget = e.target;
if (theTarget != null && theTarget.tagName == ‘SELECT’) {
return false;
}
第二步：
在 touchStart函数处即_start()处必须加入:
if (e.target.tagName != "SELECT"){
e.preventDefault();
e.stopPropagation();
}
补充：select元素操作不灵敏或操作后白屏
使用iscroll后，还有一个较麻烦的问题，就是select元素点击不灵敏（滚动之后点击select，经常无响应）；有时点击有反应了，下拉菜单显示却错位（pc端）；选择一项之后，页面直接变成了空白（iphone、android中）或者页面位置向上偏离，滚动区域位置出现偏离。
说白了，就是导致select没法用。为此我调试了很久，最后发现了问题所在：iscroll默认使用的是css的transform变形中的translate3d实现区域滚动，每次滚动实际是改变translate3d中的y轴值，实际的dom位置并没有发生变化。translate3d会导致页面的焦点错误，系统级下拉菜单的显示则会导致其出现显示偏离。
控制滚动模式的代码在67行：useTransform: true。好在iscroll提供了另一种滚动方式，基于绝对定位位置变化的滚动。修改为useTransform: false之后，iscroll就会使用对定位位方式来实现滚动，该方式是我们在web开发中模拟动画的最常用方式，滚动之后dom的实际位置也同步发生了变化，不会出现错位偏离现象。
在pc端主流浏览器、iphone、android2.2下测试，select问题完美解决。
不过需要注意，使用对position决定定位后，滚动区的宽度默认会自适应内容宽度，而不是父元素的100%，所以最好将滚动区域宽度设为100%。
- 来自： http://www.myexception.cn/web/641057.html
- 注明 : 个人操作的时候，前一个方法不起效，所以又一顿网上乱搜啊！看看后一种方法比较靠谱点，怎么我的问题还是无法解决啊！！！~~~~(>_<)~~~~ 估计iscroll不大适合比较复杂的html和js结构啊。。。
2、增加自定义滑动宽度
iScroll框架默认滑动的宽度为当前获取对象的宽度，当在形如400px宽的对象里有4张图片，我们每次只希望滑动100px的宽度暨一张图片，做如下修改:
1.在that.options里增加一个配置项getScrollW : “”，这里默认为空
2.在refresh方法里找到that.wrapperW = that.wrapper.clientWidth;并修改为that.wrapperW = that.options.getScrollW ? that.options.getScrollW : that.wrapper.clientWidth;
3:在refresh方法里找到that.scrollerW = m.round(that.scroller.offsetWidth * that.scale);并修改为that.scrollerW = m.round((that.options.getScrollW ? that.scroller.offsetWidth – that.wrapper.offsetWidth + that.options.getScrollW : that.scroller.offsetWidth) * that.scale);
增加自定义滑动宽度在iScroll里的修改就完成了，自己在用的时候，在new iScroll里可以按照配置别的参数一样，配置getScrollW 属性，如果为空或没有配置，就默认滑动当前对象的宽度，如果设置了getScrollW:100px，则就每次滑动100px;
3、增加解锁状态pullLock
iScroll默认在加载完后，会阻止浏览器的默认行为，如左右滑动的时候，这个时候会阻止上下滑动，这样对很多文章内容页相对较长的页面显然不适用，修改如下
1:在that.options里增加一个配置项pullLock: true，这里默认为true
2:在_start方法里找到e.preventDefault();,并修改为if(!that.options.pullLock){e.preventDefault();}
3:在_move方法里找到e.preventDefault();,并修改为if(that.options.pullLock){if(newY>=-10 && newY<=10){e.preventDefault();}}else{e.preventDefault();}
增加解锁状态在iScroll里的修改也完成了,自己在new iScroll的时候，增加一个配置项pullLock，如果为true的话，就不会阻止浏览器的默认行为，如果为false的话，就会阻止浏览器的默认行为，这个可以自己根据需求制定。
修改destroy方法
iScroll在初始化的时候，对resize事件做了绑定操作that._bind(RESIZE_EV, window);,但是当在destroy销毁事件的时候，做的解绑that._unbind(RESIZE_EV);没有加window对象，不知道为什么，这个改成that._unbind(RESIZE_EV,window);就行了。
4、iscroll4 实现自动滚动+手动滚动
为了满足傻b客户的需求，需要在webapp里面，实现图片的手动滚动与自动滚动，底部都导航的小圆点，类似于iscroll4官方文档中carousel 贴出代码
//全局的iscroll
var globleScroll = {
helperScroll : null,
homeScroll : null, //首页的活动iscroll
myCareScroll : null, //我的关注
wrapperCardStyle : null, //卡样库
cardStyleMainMySelf : null,//我的卡样
brandLetterList : null, //letter brand
brandFloorList : null,//floor brand
homePageIndex : 1 ,//记录当前homeScroll滚动到第几个图片了
autoScroll : true,//是否是自动滚动
autoScrollInterval : null, //定时器
tabBrand : null, //店铺
pageEventScroll : null, //普通活动
tabDiscount: null, //优惠信息
pageEventScrollVip : null //VIP活动
}; globleScroll.homeScroll = new iScroll("wrapperIndexActivity", {
snap : true,
momentum : false,
hScrollbar : false,
vScrollbar : false,
onScrollStart :function(){
//若手动拖动的时候 则clear 定时器 currPageX 归位 自动执行标识改为手动标识
globleScroll.autoScroll = false;
globleScroll.homePageIndex = 1;
clearInterval(globleScroll.autoScrollInterval);
},
onScrollEnd : function() {
$('#indicator > li.active').removeClass("active");
if(globleScroll.autoScroll){
$('#indicator > li:nth-child(' + (this.currPageX+1) + ')').addClass("active");
setHomeActivityIntro(this.currPageX+1, document.querySelector('#activityIntroMain .activityIntro'));
}else{
$('#indicator > li:nth-child(' + (this.currPageX+1) + ')').addClass("active");
setHomeActivityIntro(this.currPageX+1, document.querySelector('#activityIntroMain .activityIntro'));
autoHomeScroll();
}
}
}); autoHomeScroll();//执行定时器
function autoHomeScroll(){//自动滚动代码
globleScroll.autoScrollInterval = setInterval(function(){//自动执行代码
globleScroll.autoScroll = true;//是手动还是自动滚动
globleScroll.homeScroll.currPageX += globleScroll.homePageIndex;
if(globleScroll.homeScroll.currPageX >= globleScroll.homeScroll.pagesX.length-1){
globleScroll.homePageIndex = -1;
}else if(globleScroll.homeScroll.currPageX <= 0){
globleScroll.homePageIndex =1;
}
globleScroll.homeScroll.scrollToElement('li:nth-child('+ (globleScroll.homeScroll.currPageX+1)+')',500);
},3000)
}
JS
5、iScroll4启用snap时原生滚动被阻止的解决办法
iScroll4启用snap时原生滚动会被阻止，具体表现是拖动snap作用的元素往非snap路径时将无法拖动页面。
官方的解决办法是追加onBeforeScrollStart事件：
onBeforeScrollStart: function (e) { return true; }
这种办法在测试中iOS和原生android设备是没有问题的，但第三方定制系统的设备（如小米，魅族）以及将页面在android应用中打开都会造成滑动非常的卡的现象。这时只要改改iScoll4的源码即可。具体参看 https://github.com/zmathew/iscroll/commit/86acfc09298a999c6f3097ecea736169e00b8e52
onBeforeScrollStart: function (e) {
if(!hasTouch) e.preventDefault();
}，
---------------------------------------------------
// Zoom
if (that.options.zoom && hasTouch && e.touches.length > 1) {
e.preventDefault();
c1 = m.abs(e.touches[0].pageX - e.touches[1].pageX);
c2 = m.abs(e.touches[0].pageY - e.touches[1].pageY);
---------------------------------------------------
// Lock direction
if (that.options.lockDirection) {
if (that.absDistX > that.absDistY + 5) {
newY = that.y;
deltaY = 0;
} else if (that.absDistY > that.absDistX + 5) {
newX = that.x;
deltaX = 0;
}
}
var oldX = that.x;
var oldY = that.y;
that.moved = true;
that._pos(newX, newY);
if(hasTouch && (that.x != oldX || that.y != oldY)) {
e.preventDefault();
}
xxx是新增加的代码
6. iscoll兼容问题，解决页面整体滑动
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
这句是解决浏览器与iscoll的兼容问题，加上之后就不会出现滑动屏幕时，整个页面滚动的问题了
7. 固定定位
固定定位不是iscroll的原生用法，而是使用iscroll协助解决固定定位问题。
话说iphone很先进，但就是不支持position:fixed。这下苦了我们了，固定定位怎么解决啊，我们会经常遇到固定标题栏、固定工具栏等情况啊！！
使用iscroll协助解决：首先获取浏览器窗口高度；然后获取固定工具栏的高度；接着将除固定工具栏之外的内容全部放在一个固定区域内，该固定区域的高度=窗口高度-工具栏高度；之后对固定区域使用iscroll。这样，整个html页面的高度正好等于窗口高度，页面级别不会出现滚动，工具栏就一直固定在当前的位置。在固定区域内滑动，可以查看页面其他内容，不会影响工具栏的定位。
8. 鼠标滚轮滚动
iscroll支持在pc端浏览器中使用鼠标滚轮控制区域滚动，但操作起来很不灵敏。这是由于iscroll对鼠标滚轮事件做了拦截，然后缩小了滚轮的滚动距离，详见iscroll4.js源代码608-609行：
wheelDeltaX = e.wheelDeltaX / 12;//控制X轴鼠标滚轮速度
wheelDeltaY = e.wheelDeltaY / 12;//控制Y轴鼠标滚轮速度
iscroll将每次的滚轮距离缩小为系统默认距离的12分之一，难怪滚起来很慢，感觉不灵敏。只需要将12改成1，滚轮的滚动速度就恢复正常了。你也可以根据实际需要设置成其他值。
输入框聚焦不灵敏、无法选择文字
使用了iscroll之后，你会发现点击输入框时不灵敏，经常无法聚焦；页面文字也无法选择和复制。这是由于iscroll要监听鼠标事件和触摸事件来进行滚动，所以禁止了浏览器的默认行为，详见源代码92行：
onBeforeScrollStart: function (e) { e.preventDefault(); },
iscroll不分青红皂白，禁止了浏览器的一切默认行为，导致上述问题。所以我们需要稍作修改：
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEXTAREA’)
e.preventDefault();
},
判断触发事件的元素是不是input、select、textarea等表单输入类元素，如果不是就阻止默认行为。这样保证了输入类元素能正确快速聚焦。
在上述修改中追加一个条件 target.tagName != ‘body’或者直接将onBeforeScrollStart修改为null，即可做到鼠标选取文字，但这样的修改会导致iscroll滚动失效或不灵敏，所以无法选取文字这个问题先放一边吧。如你有更好的方法，欢迎回复。
9、iscroll兑现图片的循环滑动
html
<div class="gexian">
</div>
<div style="margin:0 auto;">
<div class="bgfont">
<div>
<span class="meihong size20">99特惠</span>
超低价无限购
</div>
</div>
</div>
<div id="index-splash-block1" class="index-splash-block" style="position:relative;width:320px;overflow:hidden;">
<div id="scroller_99ii">
<div id="pullDown_99" style="display:none;">
<span class="pullDownIcon"> </span>
<span class="pullDownLabel"> Pull down to refresh...</span>
</div>
<ul id="feature-slide-block1" class="feature-slide-block" style="width:1600px;">
<li class="feature-slide-preview1">
<div class="dtk-list">
<div class="dtk-item">
<a href="/wap/queryPromotionDetail.do?id=M0212060101&appCode=prop&type=990002&merchantType=sale99">
<div class="dazhe">
<span style="font-size:18px;">4.5</span>
<span style="font-size:12px;">折</span>
</div>
<div class="sp_bg">
<img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M0212060101_1_micro.png" alt="商品图片" class="sp01" />
</div>
</a>
</div>
<div class="dtk-item">
<a href="/wap/queryPromotionDetail.do?id=M1312051801&appCode=prop&type=990002&merchantType=sale99">
<div class="dazhe">
<span style="font-size:18px;">3.3</span>
<span style="font-size:12px;">折</span>
</div>
<div class="sp_bg">
<img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1312051801_1_micro.png" alt="商品图片" class="sp01" />
</div>
</a>
</div>
</div>
</li>
<li class="feature-slide-preview1">
<div class="dtk-list">
<div class="dtk-item">
<a href="/wap/queryPromotionDetail.do?id=M0112041201&appCode=prop&type=990002&merchantType=sale99">
<div class="dazhe">
<span style="font-size:18px;">0.9</span>
<span style="font-size:12px;">折</span>
</div>
<div class="sp_bg">
<img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M0112041201_1_micro.png" alt="商品图片" class="sp01" />
</div>
</a>
</div>
<div class="dtk-item">
<a href="/wap/queryPromotionDetail.do?id=M1112061502&appCode=prop&type=990002&merchantType=sale99">
<div class="dazhe">
<span style="font-size:18px;">4.0</span>
<span style="font-size:12px;">折</span>
</div>
<div class="sp_bg">
<img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1112061502_1_micro.png" alt="商品图片" class="sp01" />
</div>
</a>
</div>
</div>
</li>
<li class="feature-slide-preview1">
<div class="dtk-list">
<div class="dtk-item">
<a href="/wap/queryPromotionDetail.do?id=M1112070301&appCode=prop&type=990002&merchantType=sale99">
<div class="dazhe">
<span style="font-size:18px;">2.3</span>
<span style="font-size:12px;">折</span>
</div>
<div class="sp_bg">
<img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1112070301_1_micro.png"
alt="商品图片" class="sp01" />
</div>
</a>
</div>
<div class="dtk-item">
<a href="/wap/queryPromotionDetail.do?id=M1312060101&appCode=prop&type=990002&merchantType=sale99">
<div class="dazhe">
<span style="font-size:18px;">3.9</span>
<span style="font-size:12px;">折</span>
</div>
<div class="sp_bg">
<img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1312060101_1_micro.png" alt="商品图片" class="sp01" />
</div>
</a>
</div>
</div>
</li>
<li class="feature-slide-preview1">
<div class="dtk-list">
<div class="dtk-item">
<a href="/wap/queryPromotionDetail.do?id=M1012051802&appCode=prop&type=990002&merchantType=sale99">
<div class="dazhe">
<span style="font-size:18px;">4.0</span>
<span style="font-size:12px;">折</span>
</div>
<div class="sp_bg">
<img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1012051802_1_micro.png" alt="商品图片" class="sp01" />
</div>
</a>
</div>
<div class="dtk-item">
<a href="/wap/queryPromotionDetail.do?id=M1212042601&appCode=prop&type=990002&merchantType=sale99">
<div class="dazhe">
<span style="font-size:18px;">3.2</span>
<span style="font-size:12px;">折</span>
</div>
<div class="sp_bg">
<img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1212042601_1_micro.png" alt="商品图片" class="sp01" />
</div>
</a>
</div>
</div>
</li>
<li class="feature-slide-preview1">
<div class="dtk-list">
<div class="dtk-item">
<a href="/wap/queryPromotionDetail.do?id=M0812060801&appCode=prop&type=990002&merchantType=sale99">
<div class="dazhe">
<span style="font-size:18px;">6.1</span>
<span style="font-size:12px;">折</span>
</div>
<div class="sp_bg">
<img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M0812060801_1_micro.png" alt="商品图片" class="sp01" />
</div>
</a>
</div>
<div class="dtk-item">
<a href="/wap/queryPromotionDetail.do?id=M1312060102&appCode=prop&type=990002&merchantType=sale99">
<div class="dazhe">
<span style="font-size:18px;">6.6</span>
<span style="font-size:12px;">折</span>
</div>
<div class="sp_bg">
<img src="http://pic.99wuxian.com/mall/hpdownload/common/mdse/M1312060102_1_micro.png" alt="商品图片" class="sp01" />
</div>
</a>
</div>
</div>
</li>
</ul>
<div id="pullUp_99" style="display:none;">
<span class="pullUpIcon">
</span>
<span class="pullUpLabel">
Pull up to refresh...
</span>
</div>
</div>
<div id="feature-slide-list1" class="feature-slide-list" style="top:160px;position: absolute;">
<a href="javascript:void(0)" onclick="directionRoll(myScroll_99TeHui,'prev',5,0)"
id="feature-slide-list-previous1" class="feature-slide-list-previous i_com">
</a>
<div id="feature-slide-list-items1" class="feature-slide-list-items">
<a href="javascript:void(0)" class="current"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:void(0)"> </a>
<a href="javascript:void(0)"></a>
</div>
<a href="javascript:void(0)" onclick="directionRoll(myScroll_99TeHui,'next',5,0)"
id="feature-slide-list-next1" class="feature-slide-list-next i_com">
</a>
</div>
<div class="cp_more">
<a href="/wap/sale99OrTopicList.do?appCode=prop&type=sale99&cateCode=990002&pager.offset=1&pageSize=18">更多></a>
</div>
</div>
<div style="clear: both; position: relative; overflow: hidden; width: 300px;margin:0px 0px 0px 5px;">
<div class="lantern_slide" id="lantern_slide">
<div class="ls_pic" id="bimg" style="width:300px;">
<div id="pullDown_Topic" style="display:none;">
<span class="pullDownIcon"></span>
<span class="pullDownLabel">Pull down to refresh...</span>
</div>
<ul style="height:60px;">
<li class="dis" name="f">
<a href="/wap/sale99OrTopicList.do?appCode=prop&type=topic&cateCode=9900003&pager.offset=1&pageSize=18">
<img src="http://pic.99wuxian.com/mall/hpdownload/web/20120815181815183.jpg"
/>
</a>
</li>
</ul>
<div id="pullUp_Topic" style="display:none;">
<span class="pullUpIcon"></span>
<span class="pullUpLabel">Pull up to refresh...</span>
</div>
</div>
</div>
</div>
js代码
function loadedFor99TeHui(){
if(null!=document.getElementById("index-splash-block1")){
pullDownEl_99 = document.getElementById('pullDown_99');
pullUpEl_99 = document.getElementById('pullUp_99');
pullDownOffset_99 = pullDownEl_99.offsetHeight;
pullUpOffset_99 = pullUpEl_99.offsetHeight;
myScroll_99TeHui = new iScroll('index-splash-block1', {
snap: true,
momentum: false,
hScrollbar: false,
checkDOMChanges:true,
onRefresh: function () {
if (pullDownEl_99.className.match('loading')) {
pullDownEl_99.className = '';
} else if (pullUpEl_99.className.match('loading')) {
pullUpEl_99.className = '';
}
},
onScrollMove: function () {
if (this.x > 5 && !pullDownEl_99.className.match('flip')) {
pullDownEl_99.className = 'flip';
this.minScrollX = 0;
} else if (this.x < 5 && pullDownEl_99.className.match('flip')) {
pullDownEl_99.className = '';
this.minScrollX = -pullDownOffset_99;
} else if (this.x < (this.maxScrollX - 5) && !pullUpEl_99.className.match('flip')) {
pullUpEl_99.className = 'flip';
this.maxScrollX = this.maxScrollX;
} else if (this.x > (this.maxScrollX + 5) && pullUpEl_99.className.match('flip')) {
pullUpEl_99.className = '';
this.maxScrollX = pullUpOffset_99;
}
},
onScrollEnd: function () {
document.querySelector('#feature-slide-list-items1 > a.current').className = '';
document.querySelector('#feature-slide-list-items1 > a:nth-child(' + (this.currPageX+1) + ')').className = 'current';
var count=document.querySelectorAll("#feature-slide-list-items1 > a").length;
if (pullDownEl_99.className.match('flip')) {
pullDownEl_99.className = 'loading';
scrollDirection(this,'next',count);
} else if (pullUpEl_99.className.match('flip')) {
pullUpEl_99.className = 'loading';
scrollDirection(this,'prev',count);
}
}
});
}
}
document.addEventListener('DOMContentLoaded',setTimeout(loadedFor99TeHui,100),false);
JS
10.去掉手机地址栏
document.getElementsByTagName("body")[0].style.height = document.documentElement.clientHeight + 70 + "px";
//将body高度设为高出显示区域的高度。 setTimeout(hideURLbar, 0);
function hideURLbar() {
window.scrollTo(0, 1);
document.getElementsByTagName("body")[0].style.height = window.innerHeight + "px";
//隐藏完之后，再将body高度设回满屏高度。
}
11.input等不能输入内容的解决方法
使用iscroll使屏幕上下滑动。发现当使用iscroll后，input等不能输入内容了。这个问题原因在于iscroll需要一直监听用户的touch操作，以便灵敏的做出对应效果，所以它把其余的默认事件屏蔽了，只要在iscroll.js文件中加入如下代码就ok了。
function allowFormsInIscroll(){
[].slice.call(document.querySelectorAll('input, select, button')).forEach(function(el){
el.addEventListener(('ontouchstart' in window)?'touchstart':'mousedown', function(e){
e.stopPropagation();
})
})
}
document.addEventListener('DOMContentLoaded', allowFormsInIscroll, false);
或在iscroll4源码里面找到这一行 onBeforeScrollStart: function (e) { e.preventDefault(); }，改成
deName.toLowerCase():(e.target ? e.target.nodeName.toLowerCase():'');if(nodeType !='select'&& nodeType !='option'&& nodeType !='input'&& nodeType!='textarea') e.preventDefault(); }
补充： 左右滚动时，不能正确响应正文上下拉动
在做这种效果时 ，假如这个幻灯片模块只是你页面的一部分，你还需要上下拉动页面去浏览其它内容时，你的手指在这个模块上做上下拨动时，恐怕会没有反应。原因还是和上面一样的，因为屏蔽了默认事件
12. 往iscroll容器内添加内容时，容器闪动的bug
其实病灶在于iscroll使用了太为先进的CSS3属性，可能web webkit对这些属性的支持力度还是不够好。
涉及的两个属性是 translate3d 和 TransitionTimingFunction，或许是这两个属性在列表长度改变时会影响到渲染，所以导致页面闪动，解决办法就是找到源代码的，
has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()
改成：
has3d = false
和在配置iscroll时，useTransition设置成false就可以了（useTransition默认是false的）。
这样做有一点瑕疵就是滚动起来和原来比没那么流畅了（原来的效果真的是可以媲美原生app的），但是假如你不对比的话，是看不出来了。
不过如果你符合下面的条件，我还是不建议你修改成我这样：
- 即使你不修改，无论你怎么往iscroll容器里面插内容，它都不会闪动，这种情况大多出现在纯文字的列表。假如列表涉及复杂的布局和图片，很多时候会出现闪动bug
- 如果你的web app只是单纯在手机浏览器浏览。translate3d 和 TransitionTimingFunction只是在IOS里的uiwebview支持不成熟，但是在手机上的safari完全没有问题，所以如果你不是用phonegap之类的框架开发混合app，你不需要担心这个问题。
- 只针对android，因为android的webkit暂时还不支持translate3d，iscroll会自动选择不用
13. 过长的滚动内容，导致卡顿和app直接闪退
说白了iscroll都是用js+css3实现的，对浏览器的消耗肯定是可观的，避免无限制的内容加载本身就是web产品应该避免的。
假如无可避免，我们可以尽量减低iscroll对浏览器内存的消耗
- 1)不要使用checkDOMChanges。虽然checkDOMChanges很方便，定时检测容器长度是否变化来refresh，但这也意味着你要消耗一个Interval的内存空间
- 2)隐藏iscroll滚动条，配置时设置hScrollbar和vScrollbar为false。
- 3)不得已的情况下，去掉各种效果，momentum、useTransform、useTransition都设置为false
iScroll框架的使用和修改的更多相关文章
- iScroll框架解析——Android 设备页面内 div（容器，非页面）overflow:scroll; 失效解决（转）
移动平台的活,兼容问题超多,今儿又遇到一个.客户要求在弹出层容器内显示内容,但内容条数过多,容器显示滚动条.按说是So easy,容器设死宽.高,CSS加属性 overflow:scroll; -we ...
- Farseer.net轻量级开源框架 入门篇：修改数据详解
导航 目 录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 入门篇: 添加数据详解 下一篇:Farseer.net轻量级开源框架 入门篇: 删除数据详解 ...
- 集合框架之——迭代器并发修改异常ConcurrentModificationException
问题: 我有一个集合,如下,请问,我想判断里面有没有"world"这个元素,如果有,我就添加一个"javaee"元素,请写代码实现. 使用普通迭代器出现的异常: ...
- YII框架下实现密码修改
YII2 实现修改密码功能 主要难点: 1.密码加密 YII2对密码加密生成的结果是不同的,即用相同的初始密码在不同时间得到的加密结果不同,所以我们不能用常用的方法去验证密码是否正确(将密码加密后与数 ...
- 18.Yii2.0框架模型修改记录 和 修改点击量
目录 修改数据 修改点击量 修改数据 上面要 use app\models\Article; //修改 //http://yii.com/?r=home/Edit public function ac ...
- 《HiWind企业快速开发框架实战》（1）框架的工作原理
<HiWind企业快速开发框架实战>(1)框架的工作原理 1.HiWind架构 HiWind的基本架构如下: 持久层部分:同时为框架本身的业务服务,也为开发人员的自定义业务服务. 逻辑层: ...
- Util应用程序框架公共操作类(四):验证公共操作类
为了能够验证领域实体,需要一个验证公共操作类来提供支持.由于我将使用企业库(Enterprise Library)的验证组件来完成这项任务,所以本文也将演示对第三方框架的封装要点. .Net提供了一个 ...
- 开源一个windows下的定时任务框架，简单粗暴好用。
这里是你想要的功能: 支持插件,将你要执行的任务编译成程序集放到框架的根目录下,再进行简单的配置就行了. 支持Corn表达式.想让任务在什么时候执行就在什么时候执行. 支持安装成windows ser ...
- 用Python写一个简单的Web框架
一.概述 二.从demo_app开始 三.WSGI中的application 四.区分URL 五.重构 1.正则匹配URL 2.DRY 3.抽象出框架 六.参考 一.概述 在Python中,WSGI( ...
随机推荐
- Vijos P1002 过河 （NOIP提高组2005）
链接:https://www.vijos.org/p/1002 解析: 若 p*x+(p+1)*y=Q(採用跳跃距离p和p+1时能够跳至不论什么位置Q),则在Q ≥ P*(P-1)时是一定有解的. 因 ...
- Python 倒叙切片
倒序切片 对于list,既然Python支持L[-1]取倒数第一个元素,那么它同样支持倒数切片,试试: >>> L = ['Adam', 'Lisa', 'Bart', 'Paul' ...
- android基础-Apk打包过程(了解)
此文来源于<Android软件安全与逆向分析> 一.打包资料文件,生成R.java文件. 二.处理aidl文件,生成相应的Java文件. 三.编译工程源代码,生成相应的class文件. 四 ...
- [转载]编写高性能js
一．执行效率 1. DOM 1.1 使用DocumentFragment优化多次append 说明:添加多个dom元素时,先将元素append到DocumentFragment中,最后统一将Docum ...
- 【TP3.2】模板引用头和尾.html文件
传送门:http://document.thinkphp.cn/manual_3_2.html#include 使用模版表达式 模版表达式的定义规则为:模块@主题/控制器/操作 例如: <inc ...
- Idea 翻译插件
https://github.com/YiiGuxing/TranslationPlugin
- mysql常见数据提示 mysql报错提示大全
错误代码和消息 目录 B.1. 服务器错误代码和消息 B.2. 客户端错误代码和消息 本章列出了当你用任何主机语言调用MySQL时可能出现的错误.首先列出了服务器错误消息.其次列出了客户端程序消息. ...
- ansible 提示安装sshpass
之前用ansible一直用的root身份.机器之间又早早的做好了ssh信任.所以一直也没有出现什么问题.今天想想自己不能这么浪了,还是用回普通用户吧: 然而马上就遇到了第一个问题,ansible提示安 ...
- python __path__ 变量
今天在读django源码的时候遇到了一个问题!它就是__path__这个系统变量 一.__path__变更初见: 由__path__这个变量的名字就知道,这个是一个系统变量,不是用户自定义的变量,于是 ...
- Spring3的表达式语言
Spring表达式语言全称为“Spring Expression Language”,缩写为“SpEL”,类似于Struts2x中使用的OGNL表达式语言, 能在运行时构建复杂表达式.存取对象图属性. ...