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;
}
相关推荐
岛泪14 分钟前
把 el-cascader 的 options 平铺为一维数组(只要叶子节点)
前端·javascript·vue.js
lendsomething31 分钟前
graalvm使用实战:在java中执行js脚本
java·开发语言·javascript·graalvm
冰暮流星1 小时前
javascript的switch语句介绍
java·前端·javascript
小简GoGo2 小时前
前端常用设计模式快速入门
javascript·设计模式
利刃大大2 小时前
【ES6】变量与常量 && 模板字符串 && 对象 && 解构赋值 && 箭头函数 && 数组 && 扩展运算符 && Promise/Await/Async
开发语言·前端·javascript·es6
天若有情6732 小时前
ES6 模块与 CommonJS 的区别详解
前端·javascript·es6
大猫会长2 小时前
postgreSQL中,RLS的using与with check
开发语言·前端·javascript
摘星编程2 小时前
React Native for OpenHarmony 实战:ProgressBar 进度条详解
javascript·react native·react.js
wusp19942 小时前
nuxt3模块化API架构
前端·javascript·nuxt3
摘星编程2 小时前
React Native for OpenHarmony 实战:SegmentControl 分段控件详解
javascript·react native·react.js