vue实用demo滚动条美化

滚动条美化前后对比

先看看滚动条美化前后的对比效果，美化后滚动条变苗条了，看着舒服一些

实现部分

滚动条美化主要是通过css来调整样式，主要涉及如下三个类：

1. -webkit-scrollbar：滚动条的宽度
2. -webkit-scrollbar-track：滚动条轨道
3. -webkit-scrollbar-thumb：滚动条滑块

<template>
    <div class="scroller box-size"> {{text}} </div>
</template>
<script>
export default {
  name: 'test',
  data () {
    return {
      text: ''
    }
  },
  methods: {
    initText () {
      this.text = '测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本'
    }
  },
  mounted () {
    this.initText()
  }
}
</script>
<style>
.box-size{
    margin:20px 50px;
    width:300px;
    height:400px;
    border:solid 1px #c8c8c8;
    overflow-y:auto;
}

.scroller::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scroller::-webkit-scrollbar-track {
    background-color:#F5F5F5;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius:2em;
}
.scroller::-webkit-scrollbar-thumb {
    background-color:#c8c8c8;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius:2em;
}
</style>