css设置滚动条样式

效果图:

javascript 复制代码
// 滚动条样式
div::-webkit-scrollbar {
    width: 4px;
}
/* 滚动条滑块(里面小方块) */
div::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    opacity: 0.2;
    background-color: #4180EF;
}

/* 滚动条轨道 */
div::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background-color: #DEDFE0;
}
相关推荐
进击的尘埃6 分钟前
从多仓到 Monorepo 的渐进式迁移:Git 历史保留、依赖收敛与缓存调优
javascript
SuperEugene25 分钟前
TypeScript+Vue 实战:告别 any 滥用,统一接口 / Props / 表单类型,实现类型安全|编码语法规范篇
开发语言·前端·javascript·vue.js·安全·typescript
gis开发2 小时前
cesium 中添加鹰眼效果
前端·javascript
bluceli2 小时前
JavaScript动态导入与代码分割:优化应用加载性能的终极方案
javascript
kyriewen2 小时前
原型与原型链:JavaScript 的“家族关系”大揭秘
前端·javascript·ecmascript 6
滴滴答答哒2 小时前
layui表格头部按钮 加入下拉选项
前端·javascript·layui
乌索普-2 小时前
基于vue2的简易购物车
开发语言·前端·javascript
走粥2 小时前
使用indexOf查找对象结合Pinia持久化引发的问题
开发语言·前端·javascript
不甜情歌3 小时前
搞懂 Promise:告别回调嵌套,再也不怕异步代码乱成麻
前端·javascript
酉鬼女又兒4 小时前
入门前端CSS 媒体查询全解析:从入门到精通,打造完美响应式布局(可用于备赛蓝桥杯Web应用开发)
前端·css·职场和发展·蓝桥杯·前端框架·html5·媒体