技术心得：前端滚动条的样式

"

一、滚动条

滚动条是对于固定高度，当内容溢出的时候，出现滚动条。

默认的滚动样式：

我们可以进行滚动条的定义

css 样式：

1

2 .inner{

3 width: 265px;

4 height: 400px;

5 position: absolute;

6 top: 33px;

7 left: 13px;

8 /cursor: pointer;/

9 overflow:hidden;

10 }

11 .innerbox{

12 overflow-x: hidden;

13 overflow-y: auto;

14 color: #000;

15 font-size: .7rem;

16 font-family: ""\5FAE\8F6F\96C5\9ED1"",Helvetica,""黑体"",Arial,Tahoma;

17 height: 100%;

18 }

19 /滚动条样//代码效果参考：https://v.youku.com/v_show/id_XNjQwMDIwMDA1Ng==.html

20 .innerbox::-webkit-scrollbar {/滚动条整体样式/

21 width: 13px; /高宽分别对应横竖滚动条的尺寸/

22 height: 4px;

23 }

24 .innerbox::-webkit-scrollbar-thumb {/滚动条里面小方块/

25 border-radius: 5px;

26 -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.8);

27 background: #A9A9A9;

28 }

29 .innerbox::-webkit-scrollbar-track {/滚动条里面轨道/

30 -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.8);

31 border-radius: 0;

32 background: white;

33 }

34

35

html：

1

2

3

4

5

333

6

7

//代码效果参考：https://v.youku.com/v_show/id_XNjQwNjYzNjIwMA==.html

学习是一种态度，坚持是质变的利器！
"