在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>
标签:vue,0.2,滚动条,webkit,scrollbar,background,组件,css From: https://www.cnblogs.com/zbbk/p/17480989.html