iScroll.js使用详解

实现移动端上下滑动效果

HTML内容如下：

<div class="sex" id="wrapper">
   <ul>
       <li data-id="0">男</li>
       <li data-id="1">女</li>
   </ul>
</div>

　　CSS

 .dialog .sexChoose .sex{
    margin:1.867rem 0;
    height:1.6rem;
    overflow: hidden;
}
.dialog .sexChoose .sex ul{
    width:1.6rem;
    margin:0 auto;
}
.dialog .sexChoose .sex ul li{
    padding:0.533rem 0;
    border-top:1px solid #42C21E;
    font-size:0.427rem;
    line-height:0.453rem;
    color:#666666;
    text-align: center;
}
.dialog .sexChoose .sex ul li:last-child{
     border-bottom:1px solid #42C21E;
}

　　

先引入Zepto.min.js文件 ，引入iscroll.js , JS调用如下:

document.querySelector('#wrapper').addEventListener("touchmove",function(e){
        e.preventDefault()
});
new IScroll(document.querySelector('#wrapper'),{
   scrollX:false,
   scrollY:true
});

　效果如下：

转载于:https://www.cnblogs.com/dyy-dida/p/10509079.html