全局渐变滚动条样式

效果如下:

javascript 复制代码
APP.vue

<style>
/* 整个滚动条 */
::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
    background-color: #49b1f5;
    /* 关键代码 */
    background-image: -webkit-linear-gradient(45deg,
            rgba(255, 255, 255, 0.4) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0.4) 75%,
            transparent 75%,
            transparent);
    border-radius: 32px;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #dbeffd;
    border-radius: 32px;
}
</style>
相关推荐
Zz_waiting.19 分钟前
案例开发 - 日程管理 - 第七期
开发语言·前端·javascript·vue.js·html·路由
rannn_1119 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
一朵梨花压海棠go9 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
β添砖java10 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)10 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术10 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫10 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css
元亓亓亓10 小时前
JavaWeb--day1--HTML&CSS
前端·css·html
β添砖java10 小时前
CSS的文本样式
前端·css
前端小趴菜0510 小时前
css - 滤镜
前端·css