iscroll 4.0 滚动（水平和垂直）-白红宇

iscroll 4.0 滚动（水平和垂直）

阅读量：4308 次

发布时间：2019-06-06

本文共 3950 字，大约阅读时间需要 13 分钟。

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这个属性，

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;}  
                 
                                      
                   
        
            
        00
             
        01
             
        02
             
        03
             
        04
             
        05
             
        06
             
        07
             
        08
             
        09
             
        10
             
        11
             
        12
         
       
                
      
      
        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);}