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); }
?代碼分析，靈活運用
)
