解決移動端ios下overflow-x scroll沒法隱藏滾動條的問題

此次有個需求是在web首頁添加分類菜單，一共是8個分類，在移動端水平展現，能夠左右滾動。 最後在手機上微信瀏覽器看到是有個滾動條，很是影響美觀。

主要經過如下代碼實現水平滾動

white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
/* 解決ios手機頁面滑動卡頓問題 */
        -webkit-overflow-scrolling: touch;

那如何隱藏滾動條呢 ，有三種方式：

一、設置僞元素::-webkit-scrollbar

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

可是這個只適用於Chrome，兼容性不太好

二、使用外層div進行包裹 經過設置height高度（遮蓋滾動條）和overflow: hidden，對scroll的container設置padding-bottom: 50px;將滾動條下移

<div class="category-nav">
      <ul class="nav-list">
        <li class="nav-item">item1</li>
        <li class="nav-item">item2</li>
        <li class="nav-item">item3</li>
        <li class="nav-item">item4</li>
        <li class="nav-item">item5</li>
        <li class="nav-item">item6</li>
        <li class="nav-item">item7</li>
        <li class="nav-item">item8</li>
        <li class="nav-item">item9</li>
        <li class="nav-item">item10</li>
      </ul>
    </div>
    <style>
      .category-nav {
        height: 92px;
        overflow: hidden;
      }
      .nav-list {
        list-style: none;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 0;
        padding-left: 34px;
        padding-right: 34px;
        padding-bottom: 50px;
        /* 解決ios手機頁面滑動卡頓問題 */
        -webkit-overflow-scrolling: touch;
      }
      .nav-item {
        width: 56px;
        height: 56px;
        background: #eee;
        margin: 10px;
        display: inline-block;
      }
    </style>

三、藉助使用swiper插件，設置模式freeMode: true

<div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">slider1</div>
        <div class="swiper-slide">slider2</div>
        <div class="swiper-slide">slider3</div>
        <div class="swiper-slide">slider4</div>
        <div class="swiper-slide">slider5</div>
        <div class="swiper-slide">slider6</div>
        <div class="swiper-slide">slider7</div>
        <div class="swiper-slide">slider8</div>
        <div class="swiper-slide">slider9</div>
        <div class="swiper-slide">slider10</div>
        <div class="swiper-slide">slider11</div>
      </div>
    </div>
    <style>
      .swiper-container {
        width: 100%;
        height: 80px;
      }
      .swiper-slide {
        width: 56px;
        height: 56px;
        background: #eee;
        margin: 10px;
      }
    </style>
    <link
      href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.min.js"></script>
    <script>
      var mySwiper = new Swiper(".swiper-container", {
        slidesPerView: "auto",
        freeMode: true,
        spaceBetween: 0
      });
    </script>

我的使用的是上面的第二種方式，完美解決問題

效果圖