北京乐逍遥网站设计有限公司|乐逍遥网站设计|乐逍遥网站建设|乐逍遥建站|php知识|前端技术|后端技术|网站源码|移动开发|网站运营|UI设计|数据库|网站设计|网站开发|小程序|乐逍遥每日一句|乐逍遥福利图片
主页 > 前端开发 > CSS/CSS3 >

css如何修改默认滚动条样式

时间:2020-03-18  编辑:

前言:

很多项目都需要改变滚动条的默认样式,并不想单独下载和引入插件。

修改方法:(推荐教程:CSS入门教程

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

&::-webkit-scrollbar {

  // 滚动条的背景

  width: 16px;

  background: #191a37;

  height: 14px;

}

 

&::-webkit-scrollbar-track,

&::-webkit-scrollbar-thumb {

  border-radius: 999px;

  width: 20px;

  border: 5px solid transparent;

}

 

&::-webkit-scrollbar-track {

  box-shadow: 1px 1px 5px #191a37 inset;

}

 

&::-webkit-scrollbar-thumb {

  //滚动条的滑块样式修改

  width: 20px;

  min-height: 20px;

  background-clip: content-box;

  box-shadow: 0 0 0 5px #464f70 inset;

}

 

&::-webkit-scrollbar-corner {

  background: #191a37;

}

精简代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

&::-webkit-scrollbar {

  width: 6px;

  height: 6px;

  background: transparent;

}

 

&::-webkit-scrollbar-thumb {

  background: transparent;

  border-radius: 4px;

}

 

&:hover::-webkit-scrollbar-thumb {

  background: hsla(0, 0%, 53%, 0.4);

}

 

&:hover::-webkit-scrollbar-track {

  background: hsla(0, 0%, 53%, 0.1);

}

这个的优点在于鼠标移上才会显示修改的滚动条。

隐藏某轴的滚动条代码写法:

1

overflow-x:hidden;


返回
顶部