代码：
<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>
css 添加滚动条
原文地址：http://www.cnblogs.com/zhujiasheng/p/7820476.html