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 小时前
使用JavaScript实现轮播图的自动切换和左右箭头切换效果
开发语言·前端·javascript·css·html
程序视点5 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian5 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
嘉琪0016 小时前
实现视频实时马赛克
linux·前端·javascript
烛阴6 小时前
Smoothstep
前端·webgl
若梦plus6 小时前
Eslint中微内核&插件化思想的应用
前端·eslint
爱分享的程序员6 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉6 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
若梦plus6 小时前
Webpack中微内核&插件化思想的应用
前端·webpack
若梦plus7 小时前
微内核&插件化设计思想
前端