css中移动端和pc端隐藏滚动条

思路：（以隐藏横行滚动条为例）

在原有盒子的基础上，外层套一个盒子，设置一个高度，超出隐藏，原有盒子的高度大于外层盒子的高度即可

代码如下：

html部分：

< div class= "hidden-bar" >

< ul class= "list-item-group" >

< li class= "list-item relative"

v-for="( item, index) in eyeShadowImgList"

:key=" item. index"

:class=" item. class"

@click=" TryMakeup( item, 1, index)" >

< img :src=" item. imgUrl" />

< span class= "overlay" v-if=" loadDataStatus" ></ span >

</ li >

</ ul >

</ div >

Css部分：

.hidden-bar{

display: inline-block;

overflow: hidden;

width: toRem( 594);

height: calc( 17vw);

.list-item-group{

display: inline-block;

width: toRem( 569);

white-space: nowrap;

overflow-x: auto;

height: calc( 17vw + 1px);

padding: 0 0 toRem( 30) toRem( 25);

li .list-item {

display: inline-block;

margin-right: toRem( 38);

width: toRem( 80);

height: toRem( 80);

border-radius: toRem( 50);

overflow: hidden;

img {

width: toRem( 80);

height: toRem( 80);

}

} }

}