自定义scroll滑块样式

简介: 自定义scroll滑块样式

这个天地,我来过,我奋战过,我深爱过,我不在乎结局。——今何在 《悟空传》

代码如下:

/* 滚动条整体部分 */
::-webkit-scrollbar {
  width: 12px;
}
/* 滚动条两端的按钮 */
::-webkit-scrollbar-button {
}
/* 外层轨道 */
::-webkit-scrollbar-track {
  background: #eee;
  border-radius: 18px;
}
/* 内层滚动槽 */
::-webkit-scrollbar-track-piece {
}
/* 滚动的滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 18px;
  background: #bbb;
}
/* 边角 */
::-webkit-scrollbar-corner {
}
/* 定义右下角拖动块的样式 */
::-webkit-resizer {
}


效果如下:

相关文章
|
4月前
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
1169 0
|
6月前
【UI】修改滚动条样式
【UI】修改滚动条样式
43 1
|
6月前
|
前端开发
css样式实现一个滑动按钮
css样式实现一个滑动按钮
57 0
|
11月前
|
前端开发
纯css实现滚动(滑动)区域
项目需求: 实现天气24小时预报,类似于华为等天气app,有个可以滑动的区域 完成效果
77 0
|
前端开发
CSS实现隐藏滚动条但是可以滚动
CSS实现隐藏滚动条但是可以滚动
60 0
Echarts自定义tooltip显示内容(隐藏小圆点)
Echarts自定义tooltip显示内容(隐藏小圆点)
287 0
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【001】
「HTML+CSS」--自定义按钮样式【001】
321 0
「HTML+CSS」--自定义按钮样式【001】
|
前端开发
修改滚动条样式 #30
修改滚动条样式 #30
87 0
|
前端开发 Linux 程序员
「HTML+CSS」--自定义按钮样式【002】
「HTML+CSS」--自定义按钮样式【002】
116 0
「HTML+CSS」--自定义按钮样式【002】