問題描述：

當移動端寫滾動效果時，會多出一部分，而且移動端和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。`