移动端滚动条的问题之一

问题描述：

当移动端写滚动效果时，会多出一部分，而且移动端和PC端的大小不一样，问题如下图圈出红色部分：
PC端：

Android：

iOS

原因：

多出的红色部分其实是滚动条的宽度，咱们直接上代码看：

.sq-combination-tit{    width: 100%;    overflow: hidden;    overflow-x: auto;    -webkit-overflow-scrolling: touch;    background: red;/*测试，为图中多出红色区域*/}.sq-combination-tit ul{    width: 220%;    background: #ffffff;}

解决方法：

你如果删除上面ul中width: 220%;的属性，那么问题会消失，虽然问题没有了，但是没办法实现左右滑动，或者你删除上面sq-combination-tit中的overflow-x: auto;属性，问题也会消失，但是你照样没办法滑动，那么到底是怎么回事呢？
而且可以从图中看到，Android和PC上都有红色问题部分，而且大小不一样，更重要的是iOS 10上不会出现这个问题，当他滑动起来的时候会出现黑色透明的滚动条，那么我们定位到问题：是不是因为滚动条的原因呢？上代码：

.sq-combination-tit::-webkit-scrollbar{    height: 0;    width: 0;}

果然PC和Android上的红色消失了，iOS 10上左右滑动时出现的黑色部分也消失了，那么下次我们要记得设置滚动条的宽高为0。`