2023年6月20日发(作者：)

美化ant-designvue组件滚动条样式，hover时滚动条样式变化a-modal：.ant-modal-body { &::-webkit-scrollbar { width: 6px; /*⾼宽分别对应横竖滚动条的尺⼨*/ height: 1px; } &::-webkit-scrollbar-thumb { border-radius: 6px; // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(144, 147, 153, 0.5); } &::-webkit-scrollbar-track { // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 5px; background: transparent; } }a-table：.ant-table-body, .ant-table-header { word-break: break-all; &::-webkit-scrollbar { width: 6px; /*⾼宽分别对应横竖滚动条的尺⼨*/ height: 6px; } &::-webkit-scrollbar-thumb { border-radius: 6px; // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(144, 147, 153, 0.5); } &::-webkit-scrollbar-track { // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 5px; background: transparent; } }备注：滚动条的组成：::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条⾥⾯的⼩⽅块，能上下左右移动（取决于是垂直滚动条还是⽔平滚动条）::-webkit-scrollbar-track 滚动条的轨道（⾥⾯装有thumb）::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调⼩⽅块的位置::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）::-webkit-scrollbar-corner 边⾓，及两个滚动条的交汇处::-webkit-resizer 两个滚动条的交汇处上⽤于通过拖动调整元素⼤⼩的⼩控件hover 时滚动条样式变化实现利⽤background-clip属性以及border来实现&::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(144, 147, 153, 0.5); // border-style: dashed; // border-color: transparent; // border-top-width: 2px; // background-clip: padding-box; // border-left-width: 0; // border-right-width: 0; } // &::-webkit-scrollbar-thumb:hover { // background: rgba(157, 165, 183, 0.7); // transition: 0.5s; // }

2023年6月20日发(作者：)

美化ant-designvue组件滚动条样式，hover时滚动条样式变化a-modal：.ant-modal-body { &::-webkit-scrollbar { width: 6px; /*⾼宽分别对应横竖滚动条的尺⼨*/ height: 1px; } &::-webkit-scrollbar-thumb { border-radius: 6px; // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(144, 147, 153, 0.5); } &::-webkit-scrollbar-track { // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 5px; background: transparent; } }a-table：.ant-table-body, .ant-table-header { word-break: break-all; &::-webkit-scrollbar { width: 6px; /*⾼宽分别对应横竖滚动条的尺⼨*/ height: 6px; } &::-webkit-scrollbar-thumb { border-radius: 6px; // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(144, 147, 153, 0.5); } &::-webkit-scrollbar-track { // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 5px; background: transparent; } }备注：滚动条的组成：::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条⾥⾯的⼩⽅块，能上下左右移动（取决于是垂直滚动条还是⽔平滚动条）::-webkit-scrollbar-track 滚动条的轨道（⾥⾯装有thumb）::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调⼩⽅块的位置::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）::-webkit-scrollbar-corner 边⾓，及两个滚动条的交汇处::-webkit-resizer 两个滚动条的交汇处上⽤于通过拖动调整元素⼤⼩的⼩控件hover 时滚动条样式变化实现利⽤background-clip属性以及border来实现&::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(144, 147, 153, 0.5); // border-style: dashed; // border-color: transparent; // border-top-width: 2px; // background-clip: padding-box; // border-left-width: 0; // border-right-width: 0; } // &::-webkit-scrollbar-thumb:hover { // background: rgba(157, 165, 183, 0.7); // transition: 0.5s; // }