css 添加滚动条

代码：

<template>
<div class="w" style="scrollbar-arrow-color:yellow;
scrollbar-base-color:lightsalmon">
<div class="pc_box">
<a class="pc_box_list">
水电费
</a>
<a class="pc_box_list">
水电费水电
</a>
<a class="pc_box_list">
水电
</a>
<a class="active pc_box_list">
水电
</a>
<a class="pc_box_list">
水电
</a>
<a class="pc_box_list">
水电第三方
</a>
<a class="pc_box_list">
水电
</a>
<a class="pc_box_list">
水电
</a>
<a class="pc_box_list">
水电第三方
</a>
<a class="pc_box_list">
水电
</a>
<a class="pc_box_list">
水电
</a>
<a class="pc_box_list">
水电第三方
</a>
</div>
</div>
</template>

<script>
export default {
name:'Project',
data () {
return {
msg: 'project'
}
}
}
</script>

<style scoped>
*{
box-sizing:border-box;
}
body{
scrollbar-arrow-color: #f4ae21;
scrollbar-face-color: #333;
scrollbar-3dlight-color: #666;
scrollbar-highlight-color: #666;
scrollbar-shadow-color: #999;
scrollbar-darkshadow-color: #666;
scrollbar-track-color: #666;
scrollbar-base-color:#f8f8f8;
}
.w{
max-width:600px;
width:100%;
margin:0 auto;
overflow-x:auto;
white-space: nowrap;
height:60px;
}

*::-webkit-scrollbar {
width: 8px;
height: 8px;
}

*:hover::-webkit-scrollbar-track {
border: 1px #d3d3d3 solid;
box-shadow: 0px 0px 3px #dfdfdf inset;
border-radius: 10px;
background: #eee;
}

*:hover::-webkit-scrollbar-thumb {
border: 1px #808080 solid;
border-radius: 10px;
background: #999;
}

*hover::-webkit-scrollbar-thumb:hover {
background: #7d7d7d;
}

.pc_box{
font-size:0px;
margin-left:-8px;
white-space: nowrap;
}
.pc_box_list{
height:50px;
margin-left:8px;
padding:20px;
display:inline-block;
font-size:12px;
vertical-align: top;
background:#ddd;
border:1px solid #ddd;
}
.pc_box_list:hover{
border:1px solid #f00;
}
</style>

 

转载于:https://www.cnblogs.com/zhujiasheng/p/7820476.html