全局渐变滚动条样式

效果如下:

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>
相关推荐
用户059540174464 小时前
用 Pytest 接管大模型记忆存储测试,状态一致性问题减少 90%
前端·css
LaughingZhu1 天前
Product Hunt 每日热榜 | 2026-07-17
前端·数据库·人工智能·经验分享·mysql·chatgpt·html
天若有情6732 天前
纯HTML+Tailwind单页作品集网站——零框架静态前端完整源码
前端·html
甜味弥漫2 天前
一文搞懂 Flex 弹性布局:为什么它成为现代 CSS 布局的首选?
css
qq_419854052 天前
空间网格管理器
前端·javascript·html
天若有情6732 天前
Dev_Portfolio 个人主页html网页源码分享!!!
前端·html·源码·个人主页
云水一下2 天前
零基础玩转 bWAPP 靶场(五):HTML 注入——存储型(博客)
web安全·html·bwapp·存储型注入
芯日记2 天前
Mac-使用文本编辑的html浏览器打开出现源代码问题
macos·html
用户059540174462 天前
AI记忆存储一致性踩坑实录:每天手工回归200条对话,直到我用pytest+Redis搭建自动化验证
前端·css
杨超越luckly2 天前
Agent应用指南:利用POST请求获取麦当劳门店位置信息
人工智能·arcgis·html·数据可视化·麦当劳