修改webkit内核浏览器默认滚动条样式

最新推荐文章于 2025-03-19 12:09:23 发布

小狼go forward

最新推荐文章于 2025-03-19 12:09:23 发布

阅读量703

点赞数 2

分类专栏： vue 文章标签： css vue.js javascript

本文链接：https://blog.youkuaiyun.com/Echoesinadistance/article/details/110383012

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

本文档介绍了如何在Vue项目中参考飞书滚动条样式进行定制。首先，在main.js中引入全局css文件index.scss，然后添加自定义滚动条样式的代码，包括滚动条宽度、背景色、轨道内阴影、圆角、滑块颜色等。当鼠标悬浮和点击时，滚动条颜色会有所变化。通过这种方法，可以实现与飞书类似风格的滚动条效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 项目参考飞书滚动条样式

1、在main.js中找到全局css样式文件位置，一般名称global.scss，本项目中名称为index.scss.

import Element from 'element-ui'
import './styles/element-variables.scss'

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

2、加入自定义滚动条样式代码

// 滚动条
::-webkit-scrollbar{
  width: 7px;
  height: 7px;
  background-color: #ffffff;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(82, 82, 82, 0.3);
  border-radius: 10px;
  background-color: #ffffff;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
  background-color: #c8c8c8;
}
/*鼠标悬浮和点击颜色加深*/
::-webkit-scrollbar-thumb:hover
{ 
    background-color:#b4b8c0;
}
::-webkit-scrollbar-thumb:active  {
    background-color:#909399;
}