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白色

相关推荐
庞囧3 分钟前
通俗易懂讲 React 原理-第二集:Fiber
前端
beckyye12 分钟前
给web增加简单的ai对话功能
前端·ai·通义千问·qwen
Gee Explorer33 分钟前
第一篇使用HTML写一个随机点名网页
css·html5·1024程序员节
青衫码上行41 分钟前
【Java Web学习 | 第1篇】前端 - HTML
java·前端·学习
元直数字电路验证41 分钟前
HTML 标签及推荐嵌套结构
前端·javascript·html
charlie11451419143 分钟前
HTML 理论笔记
开发语言·前端·笔记·学习·html·1024程序员节
知识分享小能手1 小时前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
阿金要当大魔王~~1 小时前
uniapp img 动态渲染 的几种用法
java·服务器·前端·1024程序员节
one.dream1 小时前
用webpack 插件实现 img 图片的懒加载
前端·webpack·node.js
打小就很皮...1 小时前
Steps + Input.TextArea + InfiniteScroll 联调优化
前端·react.js