移動端滾動條的問題之一
阿新 • • 發佈:2019-01-09
問題描述:
當移動端寫滾動效果時,會多出一部分,而且移動端和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。`