1、通过hover来控制div的overflow-y的变化实现滚动条的显示与隐藏。话不多说，直接上代码说明。
image
<template>
<div class="home">
<div class="first-border">
<div class="second-border">
<div class="img-border" v-for="(item,index) in imgList" :key="index">
<img :src="item.src" alt="" >
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "home",
components: {
},
data(){
return{
}
},
methods:{
}
};
</script>
<style lang="stylus">
.first-border{
width :755px;
height :380px;
border:1px solid #f3f3f3
}
.second-border{
height :100%;
display: flex;
flex-flow: wrap;
overflow-x :hidden;
overflow-y:hidden
}
.second-border:hover{
overflow-y:auto
}
.img-border{
display:flex;
align-items :center;
margin: 17px 32px 0 0;
width: 116px;
height: 116px;
background: #f3f3f3;
}
.img-border img{
width :116px;
}
.second-border::-webkit-scrollbar{
width :6px;
height :6px
}
.second-border::-webkit-scrollbar-thumb{
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background: #bebebe;
}
.second-border::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background: #efefef;
}
</style>
最外层的div框设置高度，第二层高度100%把overflow-y设为hidden，然后设置.second-border:hover的overflow-y:auto。这样当鼠标移入的时候就会显示滚动条了（如下图所示）
image.png
