在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;
}