（无JS）微信端纯H5的X,Y轴滑动

对于移动端这块还不是很熟悉，之前一直是用动态加减ul的transform以及设置transition属性使其左右上下移动，但是在处理动态加载数据的页面特别是不能用px做单位的情况下很尴尬。 今日偶然发现用纯的H5也能实现此效果，兼容性也不差，故借此机会写下个人的第一笔：

基本布局：

<div class="box">
<ul>
<li>品牌团</li>
<li>美体个护</li>
<li>食品保健</li>
<li>婴幼儿</li>
<li>百货</li>
<li>数码</li>
</ul>
</div>

X轴：

.box {
width: 100%;
position: fixed;
overflow-x: scroll;
border: 1px solid gold;
}
ul {
display: inline;
overflow-x: scroll;
float: left;
overflow-y: hidden
}
li {
display: inline-block;
width: 80px;
height: 30px;
}

Y轴：

.box {
height: 100%;
position: fixed;
overflow-y: scroll;
}
ul {
overflow-y: scroll;
float: right;
overflow-x: hidden;
}
li {
width: 100px;
height: 200px;
}

注：

(1) x,y方向上主要是li是否设置display: inline-block;

(2) 重要的点： Y：

ul {

overflow-y: scroll;

float: right;

overflow-x: hidden;

}

.box{

height: 100%;

position: fixed;

overflow-y: scroll;

}

(3) 移动测试端会有滚动条，真机没有影响。

(4) 加入.box原因是限定html的高度不被撑大。