HTML元素超出部分滾動, 並隱藏滾動條

在customerList容器里面，brandItem超出部分滑動，並且隱藏滑動條 （項目需要 應用在移動端）

<div  class="customerList" v-if="isShowCustomer==true">
      <div class="customerItem" v-for="brandItem in Brands" @click="getBrand(brandItem)">{{brandItem.BrandName}}</div>
</div> 

一，利用 css 3 的新特性 -webkit-scrollbar, 但是這種方式不兼容 火狐 和 IE

.customerList {
    .px2rem(252);
    height: @px2rem;
    overflow-x: hidden;
    overflow-y: scroll;
  }

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

(僅實現超出部分滑動 可用css樣式 overflow: auto;)

二，利用內外層嵌套, 模擬, 兼容所有瀏覽器, 相對於方法一比較麻煩, 使用時不能對滾動條聲明任何樣式

html部分：

<div  class="customerList" v-if="isShowCustomer==true">
      <div>    
          <div class="customerItem" v-for="brandItem in Brands" @click="getBrand(brandItem)">{{brandItem.BrandName}}</div>
      </div>
</div> 

css部分：

.customerList {
  /* 父容器設置高度, 並超出部分不顯示 */
    .px2rem(252);
    height: @px2rem;
    overflow: hidden;
  }

 .customerList >div{
     /* 子容器比父容器高*/
         .px2rem(352);
          height: @px2rem;
          overflow-y: scroll;
}