vue中css修改滚动条样式

vue中css修改滚动条样式

效果图:

代码(在app.vue中全局增加下面样式即可):

js 复制代码
&::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 3px;
  }

  /*定义滚动条轨道 内阴影+圆角*/

  &::-webkit-scrollbar-track {
    //-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.05);
  }

  /*定义滑块 内阴影+圆角*/

  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    //-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background: rgba(0, 0, 0, 0.15);
  }
相关推荐
Liamhuo33 分钟前
2.1.7 network-浏览器-前端浏览器数据存储
前端·浏览器
洋葱头_33 分钟前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
前端小书生42 分钟前
React 组件渲染
前端·react.js
奔跑的蜗牛ing1 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
sjd_积跬步至千里1 小时前
CSS实现文字横向无限滚动效果
前端
维他AD钙1 小时前
前端基础避坑:3 个实用知识点的简单用法
前端
journs1 小时前
micro-app微前端styled-components CSSOM模式 应用切换样式丢失问题
前端
呼啦啦小魔仙1 小时前
elpis项目DSL设计分享
前端
李李记1 小时前
别让 “断字” 毁了 Canvas 界面!splitByGrapheme 轻松搞定非拉丁文本换行
前端·canvas
来金德瑞1 小时前
快速掌握 ProseMirror 的核心概念
前端