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;
}
相关推荐
社恐的下水道蟑螂2 小时前
从字符串到像素:深度解析 HTML/CSS/JS 的页面渲染全过程
javascript·css·html
百锦再2 小时前
第1章 Rust语言概述
java·开发语言·人工智能·python·rust·go·1024程序员节
行走的陀螺仪3 小时前
uni-app + Vue3 实现折叠文本(超出省略 + 展开收起)
前端·javascript·css·uni-app·vue3
冴羽3 小时前
JavaScript 异步循环踩坑指南
前端·javascript·node.js
Mr.Jessy3 小时前
Web APIs 学习第四天:DOM事件进阶
开发语言·前端·javascript·学习·ecmascript
醉方休3 小时前
开发一个完整的Electron应用程序
前端·javascript·electron
不会算法的小灰3 小时前
Vue.js 基础教程:从入门到实践
前端·javascript·vue.js
拉不动的猪4 小时前
浏览器&Websocket&热更新
前端·javascript·vue.js
Never_Satisfied4 小时前
在JavaScript中,将包含HTML实体字符的字符串转换为普通字符
开发语言·javascript·html
im_AMBER4 小时前
React 12
前端·javascript·笔记·学习·react.js·前端框架