1、概述
iscroll 专注于页面滚动js。Iscroll滚动做的挺好,特别是针对手机网页（android、iphone）正好弥补手动滑屏的遗缺，而今研究一番，把代码贴出来，供大家参考。
2、iscroll使用说明
初始化iScroll
wrapperhour//标识要滚动的div对应ID
iScroll myhourScroll = new iScroll('wrapperhour', {snap: 'li',//一次滚动单位limomentum: 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;width:100%;top:3.2em; padding:15px 0px; text-align:center;}.mfpiccontext2 ul {width: 40em;overflow: hidden;float: left;}.mfpiccontext2 li{ float:left; width:5em; text-align:center;}.mfpiccontext2 li img{ width: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;width: 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); }
代码分析，灵活运用
)
