css美化滚动条样式

效果展示

实现

滚动条宽,高度

css 复制代码
/* 整体滚动条 */
::-webkit-scrollbar {
  width: 10px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #ffffff;
  border-radius: 6px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 6px;
  border: 2px solid #f1f1f1;
}

/* 滚动条滑块 - 悬停 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

讲解

scrollbar设置宽度,高度不设,自适应页面内容即可

thumb滑块设置颜色, 伪类选择器hover 悬浮样式

track背景色fff白色

相关推荐
真的想不出名儿1 小时前
登录前验证码校验实现
java·前端·python
小高0071 小时前
前端如何优雅地生成唯一标识?——一份跨环境 UUID 工具函数的封装与实战
前端·javascript·vue.js
云舟吖1 小时前
Playwright的元素定位器
前端
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 24 - Watch:Options
前端·javascript·vue.js
浅浅的学一下1 小时前
实现在富文本中直接Ctrl+C复制图片并自动上传,并支持HTML格式的图片的复制
前端
wifi歪f1 小时前
🎨 探究Function Calling 和 MCP 的奥秘
前端·ai编程·mcp
BrendanDash1 小时前
React 19.2 已发布,现已上线 npm!
前端·react.js
sheji34161 小时前
【开题答辩全过程】以 Web数据挖掘在电子商务中的应用研究为例,包含答辩的问题和答案
前端·人工智能·数据挖掘
whltaoin2 小时前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型
敲敲敲-敲代码2 小时前
web系统(asp.net和C#)
前端·c#·asp.net