滚动条样式设置

前言：滚动条是伪类，所以需要设置伪类进行替换

<template>
  <div class="wrapper">
    <div v-for="item in Array(100).fill()" :key="item"> 内容 </div>
  </div>
</template>

<style lang="scss" scoped>
.wrapper {
  height: 100%;
  overflow: auto;
  &:hover {
    &::-webkit-scrollbar {
      display: block;
      width: 6px;
      top: 2px;
    }
  }

  &:hover::-webkit-scrollbar-thumb {
    background-color: rgba(144, 146, 152, 0.5);
    border-radius: 3px;
    height: 10px;
    opacity: 0;
    -webkit-transition: all 0.12s ease-out;
    transition: all 0.12s ease-out;
  }

  &::-webkit-scrollbar {
    display: block;
    width: 6px;
  }
}
</style>