CSS设置滚动条的属性

Posted on 2022-03-08 09:30  你如世间春秋i  阅读(324)  评论(0)  编辑  收藏  举报

一：webkit下面的CSS设置滚动条

　　主要有下面7个属性

  1. ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
  2. ::-webkit-scrollbar-button 滚动条两端的按钮
  3. ::-webkit-scrollbar-track  外层轨道
  4. ::-webkit-scrollbar-track-piece  内层滚动槽
  5. ::-webkit-scrollbar-thumb 滚动的滑块
  6. ::-webkit-scrollbar-corner 边角
  7. ::-webkit-resizer 定义右下角拖动块的样式

例如：

 

 1 /* 设置滚动条的样式 */
 2 ::-webkit-scrollbar {
 3 width:12px;
 4 }
 5 /* 滚动槽 */
 6 ::-webkit-scrollbar-track {
 7 -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
 8 border-radius:10px;
 9 }
10 /* 滚动条滑块 */
11 ::-webkit-scrollbar-thumb {
12 border-radius:10px;
13 background:rgba(0,0,0,0.1);
14 -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
15 }
16 ::-webkit-scrollbar-thumb:window-inactive {
17 background:rgba(255,0,0,0.4);
18 }
View Code