移动端实现横滑

前言

在移动端中我们我们经常会遇见“横滑”的需求，也就是“横向滚动”，开使我们可能会想到用各种触摸事件，至少我的第一反应是这样，但其实有更简单的办法！也就是使用overflow属性

解决办法

方法一：使用overflow属性来解决，像下面这样即可实现横滑

ul{
      100%;
      overflow-x:auto;
      overflow-y:hidden;
      white-space:nowrap;
}
li{
　　　 display:inline-block;
}

如果说想要显示“一个半”li，其实大可不必担心怎么处理，因为我们完全可以通过控制每个li的宽度来实现这个，只要宽度合适后面的半个自然后出现！！！

注意：1、如果ul外层还有父元素那么也要给父元素设置overflow:hidden和宽度

　　　2、li要在一行显示，但是我们不要用float，因为设置之后li不占据空间

方法二：使用iScroll

HTML：
<div id="wrap" class="wrap">
  <ul>
    <li><img src="1.jpg"></li>
    <li><img src="1.jpg"></li>
    <li><img src="1.jpg"></li>
    <li><img src="1.jpg"></li>
    <li><img src="1.jpg"></li>
  </ul>
</div>

CSS：
.wrap {
   300px; height: 200px;
  position: relative;
  overflow: hidden;
}
.wrap > ul {
  position: absolute;
  white-space: nowrap;
}
.wrap li {
  display: inline-block;
}

JS：
new IScroll('#wrap', {
  scrollbars: true,
  scrollX: true,
  scrollY: false
});