h5移动端局部横向滚动采坑

---

注意

移动端最好是使用百分比或者rem布局，这样左右滚动的话更好适配。否则你需要对于每个机型大小进行适配。

一、父元素

代码如下（示例）：

display: -webkit-box;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling:touch;

注意的是一定要使用：display: -webkit-box;

二、子元素

1.公共样式

代码如下（示例）：

width: 20.7391%;
margin-right: 2.7%;

2.循环遍历生成子元素后，末尾添加一个空内容元素（右侧留白）

代码如下（示例）：

<div class="none-type"></div>

.none-type{
  width:2.2%;
  height:15px;
}

---

总结

因为我这里的父元素做了padding-left处理，故右侧需要做留白处理。右侧这样子处理是为了左右留白进行对称处理，若你左侧无留白（padding、margin）处理，则右侧留白可忽略。