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


效果如下:

相关文章
|
编解码 openCL TensorFlow
RK3568开发笔记(一):瑞芯微RK3568芯片介绍,入手开发板的核心板介绍
RK3568开发笔记(一):瑞芯微RK3568芯片介绍,入手开发板的核心板介绍
RK3568开发笔记(一):瑞芯微RK3568芯片介绍,入手开发板的核心板介绍
|
自然语言处理 数据可视化
Qt开发技术:Qt富文本(二)Qt文本光标操作、文档布局、富文本编辑、处理和Demo
Qt开发技术:Qt富文本(二)Qt文本光标操作、文档布局、富文本编辑、处理和Demo
Qt开发技术:Qt富文本(二)Qt文本光标操作、文档布局、富文本编辑、处理和Demo
解锁Qt QListWidget的全部潜力——用最佳实践和技巧赢得用户的喜爱和赞誉!
解锁Qt QListWidget的全部潜力——用最佳实践和技巧赢得用户的喜爱和赞誉!
497 1
|
JavaScript
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
这篇文章介绍了在Vue中如何使用Swiper插件创建轮播图,解决Swiper左右切换按钮不生效的问题,并展示了如何将Swiper轮播图抽离成一个可复用的公共组件,同时提供了详细的安装、配置和优化建议。
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
|
运维 监控 API
CloudStack 中的IP地址状态解析:Allocated、Reserved与Free
CloudStack 中的IP地址状态解析:Allocated、Reserved与Free
239 9
Qt6.5打包(QT windeployqt不是内部或外部命令、QT错误:缺少libgcc_s_seh-1.dll ,无法正常启动(0xc000007b) 问题解决方法)
Qt6.5打包(QT windeployqt不是内部或外部命令、QT错误:缺少libgcc_s_seh-1.dll ,无法正常启动(0xc000007b) 问题解决方法)
1461 1
|
机器学习/深度学习 算法 vr&ar
数学建模三大类模型适用场景及建模方法(纯干货)
如果评价指标个数过多(一般超过9个),利用层次分析法所得到的权重就有-定的偏差,继而组合评价模型的结果就不再可靠。可以根据评价对象的实际情况和特点,利用一定的方法,将各原始指标分层和归类,使得每易各类中的指标数少于9个。
4588 0
数学建模三大类模型适用场景及建模方法(纯干货)
|
编解码 IDE 开发工具
python ini文件包含中文时报错UnicodeDecodeError: ‘gbk‘ codec can‘t decode byte 0x8c 的解决办法
python ini文件包含中文时报错UnicodeDecodeError: ‘gbk‘ codec can‘t decode byte 0x8c 的解决办法
900 1
|
计算机视觉
vue3图片上传---vant
vue3图片上传---vant
361 0