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

2020-03-18 2562

前言:

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

修改方法:(推荐教程: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;


以上就是css如何修改默认滚动条样式的详细内容,更多请关注php知识-学习天地 www.lxywzjs.com其它相关文章!

分享至:

分享到QQ空间 分享到朋友社区 新浪微博分享

栏目地图