全局渐变滚动条样式

效果如下:

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>
相关推荐
@@小旭10 小时前
实现头部Sticky 粘性布局,并且点击菜单滑动到相应位置
前端·javascript·css
Irene199111 小时前
CSS 定位属性(relative、absolute、fixed、sticky)与实用技巧总结
css
我的写法有点潮15 小时前
推荐几个国外比较流行的UI库(上)
前端·javascript·css
m0_5027249516 小时前
vue动态设置背景图片后显示异常
前端·css
@Autowire17 小时前
Layout-position
前端·css
神秘的猪头18 小时前
🎨 CSS 这种“烂大街”的技术,怎么在 React 和 Vue 里玩出花来?—— 模块化 CSS 深度避坑指南
css·vue.js·react.js
科雷软件测试19 小时前
推荐几个常用的校验yaml、json、xml、md等多种文件格式的在线网站
xml·html·md·yaml
3秒一个大19 小时前
模块化 CSS:解决样式污染的前端工程化方案
css·vue.js·react.js
Serendipity-Solitude20 小时前
HTML 五子棋实现方法
前端·html
kilito_0120 小时前
数字时钟翻页效果
javascript·css·css3