jQ 插件 iscroll.js

Posted 2020-09-21 Sun_Song

使用方法

<div style="position: relative;">
　　<div id="wrapper">
　　　　<div class="scroll">
　　　　　　<ul class="index_nav_bar">
　　　　　　<li class="li_active">全部</li>
　　　　　　<li><a href="javascript:void(0);">护肤</a></li>
　　　　　　<li><a href="javascript:void(0);">彩妆</a></li>
　　　　　　<li><a href="javascript:void(0);">日用百货</a></li>
　　　　　　<li><a href="javascript:void(0);">食品</a></li>
　　　　　　<li><a href="javascript:void(0);">护肤</a></li>
　　　　　　<li><a href="javascript:void(0);">彩妆</a></li>
　　　　　　<li><a href="javascript:void(0);">日用百货</a></li>
　　　　　　</ul>
　　　　</div>
　　</div>
</div>

 

注意：如果要在页面中使用，最好加一个外层div设置position：relative，不然插件自带定位会扰乱布局，修改了自带的位置absolute为relative后，该滑动将不会生效

调用插件：

var Scroll = new iScroll(‘wrapper‘,{hScroll:true,vScroll:false, hScrollbar:false});

wrapper：元素id  //只有该元素下的第一个子元素才会滑动

hScroll：左右滑动

vScroll：上下滑动

hScrollbar：左右滑动条

vScrollbar:上下滑动条