1、概述
iscroll 专注于页面滚动js。Iscroll滚动做的挺好,特别是针对手机网页（android、iphone）正好弥补手动滑屏的遗缺，而今研究一番，把代码贴出来，供大家参考。
2、iscroll使用说明
初始化iScroll
wrapperhour//标识要滚动的div对应ID
iScroll myhourScroll = new iScroll('wrapperhour', { snap: 'li',//一次滚动单位li momentum: false, hScrollbar: false,//水平滚动条是否显示，true显示，false隐藏 vScrollbar: false,//垂直滚动条是否显示，true显示，false隐藏 onScrollEnd: //滚动停止回调函数 function ()
{ //处理自己的逻辑代码 if (!hourisfirst) { var ChangeTemplet = (this.currPageY);//currPageY垂直当前坐标或者叫单元数 if (ChangeTemplet > 23) ChangeTemplet = 23 $("#btnhour").val(ChangeTemplet); $("#lbhour").text(ChangeTemplet); var currobject = $("#hourlist").children()[ChangeTemplet + 1]; $(currobject).attr("class", "timeselectncl"); $(currobject).siblings().each(function () { $(this).attr("class", "timeunselectclass"); }); } else { hourisfirst = false; } } });
//初始化调用iscroll代码
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
//滚动到当前初始化的值
myhourScroll.scrollToElement("li:nth-child(" + hour + ")", 300);
3、水平滚动
主要分析css，利用到的关键是css position这个属性，可以参考查看potioin设置
<!doctype html> <html> <head> <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>家庭成员</title> <style type="text/css"> .mfpiccontext2{position: absolute;z-index: 2;100%;top:3.2em; padding:15px 0px; text-align:center;} .mfpiccontext2 ul { 40em;overflow: hidden;float: left;} .mfpiccontext2 li{ float:left; 5em; text-align:center;} .mfpiccontext2 li img{ 85%; border:1px solid #f78320; border-radius:38px;} </style> <script src="jscript/jquery-1.11.2.min.js"></script> <script src="jscript/iscroll.js"></script> <script type="text/javascript"> var myScroll; function loaded() { myScroll = new iScroll('wrapper'); } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); document.addEventListener('DOMContentLoaded', loaded, false); </script> </head> <body> <div class="picadddivtitle">滑动选择头像</div> <div class="mfacontentdiv"> <div class=" mfpiccontext2" id="wrapper"> <ul> <li><img src="images/ompic.png"/></li> <li><img src="images/ompic.png"/></li> <li><img src="images/ompic.png"/></li> <li><img src="images/ompic.png"/></li> <li><img src="images/ompic.png"/></li> <li><img src="images/ompic.png"/></li> <li><img src="images/ompic.png"/></li> <li><img src="images/ompic.png"/></li> </ul> </div> </div> </body> </html>
4、垂直滚动
.wrapper { position: absolute; top: 14em; height: 6em; left: 0; right: 0; overflow-y: scroll; overflow-x: hidden; z-index: 5;} .ultime li { text-align: center; font-size: 1em; height: 2em; display: block; line-height: 2.0em; 4em;} <div class="wrapper"> <div class="timesetdiv" id="wrapperhour" style="overflow: hidden;"> <ul id="hourlist" class="ultime ultimeright "> <li></li> <li class="timeunselectclass">00</li> <li class="timeunselectclass">01</li> <li class="timeunselectclass">02</li> <li class="timeunselectclass">03</li> <li class="timeunselectclass">04</li> <li class="timeunselectclass">05</li> <li class="timeunselectclass">06</li> <li class="timeunselectclass">07</li> <li class="timeunselectclass">08</li> <li class="timeunselectclass">09</li> <li class="timeselectncl">10</li> <li class="timeunselectclass">11</li> <li class="timeunselectclass">12</li> </ul> </div> <div //初始化小时、分钟滚动条 $loadHourMinuteData = function (hour, minute) { hour = hour + 1; minute = minute + 1; myhourScroll = new iScroll('wrapperhour', { snap: 'li', momentum: false, hScrollbar: false, vScrollbar: true, onScrollEnd: function () { if (!hourisfirst) { var ChangeTemplet = (this.currPageY); if (ChangeTemplet > 23) ChangeTemplet = 23 $("#btnhour").val(ChangeTemplet); $("#lbhour").text(ChangeTemplet); var currobject = $("#hourlist").children()[ChangeTemplet + 1]; $(currobject).attr("class", "timeselectncl"); $(currobject).siblings().each(function () { $(this).attr("class", "timeunselectclass"); }); } else { hourisfirst = false; } } }); myminuteScroll = new iScroll('wrapperminute', { snap: 'li', momentum: false, hScrollbar: false, vScrollbar: false, onScrollEnd: function () { if (!minuteisfirst) { var ChangeTemplet = (this.currPageY); if (ChangeTemplet > 59) ChangeTemplet = 59 $("#btnmiute").val(ChangeTemplet); $("#lbminute").text(ChangeTemplet) var currobject = $("#minutelist").children()[ChangeTemplet + 1]; //console.log(currobject); $(currobject).attr("class", "timeselectncl"); $(currobject).siblings().each(function () { $(this).attr("class", "timeunselectclass"); }); } else { minuteisfirst = false; } } }); myhourScroll.scrollToElement("li:nth-child(" + hour + ")", 300); myminuteScroll.scrollToElement("li:nth-child(" + minute + ")", 300); }
代码分析，灵活运用