全局渐变滚动条样式

效果如下:

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>
相关推荐
用户0595401744621 小时前
Redis缓存一致性踩坑实录:线上故障排查6小时,我用pytest+内存快照把它永久关进了笼子
前端·css
llllk2 天前
新手向逐段讲解
css
ZhengEnCi2 天前
Q02-Vue-React-index.html完全指南
vue.js·react.js·html
牧艺3 天前
HTML-in-Canvas 深度解析:让 Canvas 真正「吃上」HTML 这碗饭
前端·html·canvas
爱勇宝3 天前
我给自己做了一个新标签页:不登录、不打扰、打开就能用
前端·html·浏览器
玄玄子3 天前
CSS 浮动引起父元素高度塌陷
前端·css
越努力越幸运664 天前
多模态代码调试实战:Gemini3.5 精准捕获 HTML 隐性语法
html
用户0926292831454 天前
CSS 代码调试总踩坑?Gemini 3.5 精准定位修复
css
zzzzzz3105 天前
当甲方说'logo放大的同时再缩小一点'时,我用 AI 把这个需求做出来了
javascript·css·程序员
闪闪发光得欧6 天前
前端提效新思路:Gemini 3.5 自动化定位 CSS 异常
前端·css