vue+css: 引用的组件快速改变滚动条样式

在a组件页面内有b组件，b组件产生的滚动条太丑不好看但是又不想改变b组件（b组件公共用的地方很多）又不想专门复制份在此基础上改。

只要在使用的组件上增加css代码即可同时让组件内滚动条生效，原理是因为此滚动条相当于未定义类的当前组件全局。所以可以直接使用并生效

comp.vue

<style scoped lang="scss">
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #535353;
  //  添加 vertical ，单独设置垂直方向上的 滑块
  &:vertical {
    // background-color: red;
  }
}
/* 滚动条整体 */
::-webkit-scrollbar {
  height: 12px;
  width: 4px;
  cursor: pointer;
}
/* 两个滚动条交接处 -- x轴和y轴 */
::-webkit-scrollbar-corner {
  background-color: transparent;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #6d6868;
}
/* 滚动条轨道 */

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #ededed;
  cursor: pointer;
}
/* 滚动条两端按钮 */
::-webkit-scrollbar-button {
}
</style>

实际上滚动条时在uploadFIle组件内的，但是在父组件内设置（不想改组件）同样可以快速生效

<template>
 
        <uploadFile class="uploadstyle" style="" :files="filesArr" :folderName="folderName"></uploadFile>
    
</template>