使用iscroll.js,让一块div可以滑动H5可用(移动端可用)
下载 iscroll.js文件
iscroll.js下载
下载完成,
坑:
一般一个wrapper里面只放一个
<div id="scroller">
多了就会不滑动;
(v-if)若要判断wrapper里面内容显示不显示,新的div要放在wrapper外面;
<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
iScroll作用于滚动区域的外层。在上面的例子中,UL元素能进行滚动。只有容器元素的第一个子元素能进行滚动,其他子元素完全被忽略。
定义使用:
css:在下载js时,有demo可以看,选择类似的demo,复制css样式,一般全部都要复制过来,不然容易出错
我用的是这个:这个是上下滑动css,可鼠标拖动的,
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-ms-touch-action: none;
}
body,ul,li {
padding: 0;
margin: 0;
border: 0;
}
body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
overflow: hidden; /* this is important to prevent the whole page to bounce */
}
#wrapper {
position: absolute;
z-index: 1;
top: 45px;
bottom: 48px;
left: 0;
width: 100%;
background: #ccc;
overflow: hidden;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: