iscroll.js简单使用
1.导入js文件
2.使用如下，注意改变的是该父类的子类
window.onload = function () {
document.querySelector('.jd_cateLeft').addEventListener('touchmove',function(e){
e.preventDefault();
});
document.querySelector('.jd_cateRight').addEventListener('touchmove',function(e){
e.preventDefault();
});
/*区域滚动效果*/
/*条件：一个容器装着一个容器html结构*/
/*找到大容器*/
/*子容器大于父容器*/
new IScroll(document.querySelector('.jd_cateLeft'),{
scrollX:false, //左右滑动
scrollY:true //上下滑动
});
new IScroll(document.querySelector('.jd_cateRight'),{
scrollX:true,
scrollY:false
});
}
新增加
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
*{
margin:0px;
padding:0px;
}
.box{
width:100%;
height:200px;
overflow:hidden;
}
.box>ul{
width:101%; /*注意:必须这样写才能左右滑动*/
}
.box>ul>li{
height:40px;
width:100%;
text-align:center;
line-height:40px;
list-style:none;
border-bottom:1px solid blue;
}
</style>
<body>
<div class="box">
<ul>
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
<li>A</li>
<li>B</li>
</ul>
</div>
<script src="iscroll.js"></script>
<script>
window.onload=function(){
document.querySelector('.box').addEventListener('touchmove',function(e){
e.preventDefault();
});
new IScroll(document.querySelector('.box'),{
scrollX:true,
scrollY:true
});
}
</script>
</body>
</html>
new IScroll(document.querySelector(".nav-tabs-parent"),{
scrollX:true,
scrollY:false,
click:true //不用加下面
window.onload = function () {
document.querySelector('.jd_cateLeft').addEventListener('touchmove',function(e){
e.preventDefault();
});
document.querySelector('.jd_cateRight').addEventListener('touchmove',function(e){
e.preventDefault();
});
});
