全局渐变滚动条样式

效果如下:

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>
相关推荐
里欧跑得慢9 小时前
Flutter 像素级还原:设计稿到代码的视觉无损转换技巧
前端·css·flutter·web
烂蜻蜓19 小时前
Flask入门教程(十):静态文件——CSS、JS与图片的正确管理方式
javascript·css·flask
夏炳辉.20 小时前
Flex布局中 flex: 1 的完整解析与实战指南
前端·css·css3
RD_daoyi1 天前
谷歌改写了76%的标题:超60字符的,95%会被谷歌自己重写
大数据·服务器·开发语言·前端·搜索引擎·html
IMPYLH1 天前
HTML 的 <map> 元素
前端·html
zhanghaha13141 天前
HTML系列教程:8_HTML 文本格式化标签
前端·css·html
我命由我123451 天前
UI 设计 7 种排列方式
xml·学习·ui·html·产品运营·产品经理·学习方法
এ慕ོ冬℘゜2 天前
深入理解浏览器全屏 API:从 requestFullscreen 到全屏实战
开发语言·html
csuzhucong2 天前
二十一 - 四十阶魔方
javascript·css·html
IMPYLH2 天前
HTML 的 <main> 元素
前端·html