自定义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 {
}


效果如下:

相关文章
|
5月前
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动,跟随页面一起滚动,获取滚动距离,隐藏水平滚动条等
1278 0
|
7月前
【UI】修改滚动条样式
【UI】修改滚动条样式
51 1
|
7月前
|
前端开发
css样式实现一个滑动按钮
css样式实现一个滑动按钮
63 0
|
前端开发
纯css实现滚动(滑动)区域
项目需求: 实现天气24小时预报,类似于华为等天气app,有个可以滑动的区域 完成效果
89 0
|
前端开发
CSS实现隐藏滚动条但是可以滚动
CSS实现隐藏滚动条但是可以滚动
69 0
|
前端开发
修改滚动条样式 #30
修改滚动条样式 #30
95 0
自定义过渡动画
自定义过渡动画
128 0
自定义过渡动画
|
前端开发
css:自定义浏览器中滚动条scroll的样式
css:自定义浏览器中滚动条scroll的样式
187 0
css:自定义浏览器中滚动条scroll的样式