全局渐变滚动条样式

效果如下:

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>
相关推荐
汪汪队立大功12323 分钟前
JavaScript是怎么和html元素关联起来的?
开发语言·javascript·html
码银4 小时前
docsify 本地部署完整配置模板 || 将md文件放到网页上展示
html·docsify·md
火鸟24 小时前
给予虚拟成像台尝鲜版十之二,完善支持 HTML 原型模式
前端·html·原型模式·通用代码生成器·给予虚拟成像台·快速原型·rust语言
拉不动的猪5 小时前
CSS 像素≠物理像素:0.5px 效果的核心密码是什么?
前端·css·面试
加个鸡腿儿6 小时前
锚点跳转-附带CSS样式 & 阻止页面刷新技术方案
前端·javascript·css
程序猿_极客6 小时前
【期末网页设计作业】HTML+CSS+JS 美食分享主题网站设计与实现(附源码)
javascript·css·html
小杨累了7 小时前
CSS实现边框光点围绕特效
css
亮子AI7 小时前
【CSS】cursor: auto, default, none 有什么区别?
前端·css
一川_8 小时前
从 Vue 构建错误到深度解析:::v-deep 引发的 CSS 压缩危机
css·前端工程化
apollo_qwe9 小时前
针对Element UI 浏览器自动填充账号密码导致的白色背景问题修复方案,这是CSS自动填充样式覆盖的经典问题
css