解决移动端ios下overflow-x scroll无法隐藏滚动条的问题

这次有个需求是在web首页添加分类菜单，一共是8个分类，在移动端水平展示，可以左右滚动。
最后在手机上微信浏览器看到是有个滚动条，非常影响美观。

主要通过以下代码实现水平滚动

white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
/* 解决ios手机页面滑动卡顿问题 */
        -webkit-overflow-scrolling: touch;

那如何隐藏滚动条呢 ，有三种方式：

1、设置伪元素::-webkit-scrollbar

.header::-webkit-scrollbar {
        display: none;
      }

但是这个只适用于Chrome，兼容性不太好

2、使用外层div进行包裹 通过设置height高度（遮盖滚动条）和overflow:
hidden，对scroll的container设置padding-bottom: 50px;将滚动条下移

      

        
item1
        
item2
        
item3
        
item4
        
item5
        
item6
        
item7
        
item8
        
item9
        
item10
      
    
    

3、借助使用swiper插件，设置模式freeMode: true

      

        
slider1
        
slider2
        
slider3
        
slider4
        
slider5
        
slider6
        
slider7
        
slider8
        
slider9
        
slider10
        
slider11
      
    
    
    
    
    

个人使用的是上面的第二种方式，完美解决问题

效果图

转载于:https://www.cnblogs.com/fozero/p/11437751.html