CSS3⾃定义滚动条样式-webkit-scrollbar
前⾔
webkit⽀持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条⾃定义样式，所以⽤处还是挺⼤的。当然，兼容所有浏览器的滚动条样式⽬前是不存在的。
演⽰
来看看这2个滚动条demo：、
滚动条组成
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条⾥⾯的⼩⽅块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是⽔平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（⾥⾯装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调⼩⽅块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边⾓，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上⽤于通过拖动调整元素⼤⼩的⼩控件
简洁版
这⾥就不贴出详细代码了，demo⾥⾯可以通过查看源码寻具体样式的设置。来看看demo2中第⼆个滚动条的样式
[css]
1. /*定义滚动条⾼宽及背景⾼宽分别对应横竖滚动条的尺⼨*/
2. ::-webkit-scrollbar
3. {
4. width: 16px;
5. height: 16px;
6. background-color: #F5F5F5;
7. }
8.
9. /*定义滚动条轨道内阴影+圆⾓*/
10. ::-webkit-scrollbar-track
11. {
12. -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
13. border-radius: 10px;
14. background-color: #F5F5F5;
15. }
16.
17. /*定义滑块内阴影+圆⾓*/
18. ::-webkit-scrollbar-thumb
19. {
20. border-radius: 10px;
21. -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
22. background-color: #555;
23. }
详细设置
定义滚动条就是利⽤伪元素与伪类，那什么是伪元素和伪类呢？
伪类⼤家应该很熟悉:link,:focus,:hover，此外中⼜增加了许多伪类选择器，如:nth-child，:last-child，:nth-last-of-type()等。
在变成了“::first-letter,::first-line,::before,::after”，另外CSS3还增加了⼀个“::selection”。两个“：：”和⼀个“：”在css3中主要⽤来区分伪类和伪元素。
webkit的伪类和伪元素的实现很强，可以把滚动条当成⼀个页⾯元素来定义，再结合⼀些⾼级的CSS3属性，⽐如渐变、圆⾓、RGBa等等。然后如果有些地⽅要⽤图⽚，可以把图⽚也可以转换成Base64，不然每次都得加载那个多个图⽚，增加请求数。
任何对象都可以设置：边框、阴影、背景图⽚等等，创建的滚动条任然会按照本⾝的设置来完成其交互的⾏为。下⾯的伪类可以应⽤到上⾯的伪元素中。有点⼩复杂，具体怎么写可以看第⼀个demo，那⾥也有注释。
[css]
1. :horizontal
2. //horizontal伪类适⽤于任何⽔平⽅向上的滚动条
3.
4. :vertical
5. //vertical伪类适⽤于任何垂直⽅向的滚动条
6.
7. :decrement
8. //decrement伪类适⽤于按钮和轨道碎⽚。表⽰递减的按钮或轨道碎⽚，例如可以使区域向上或者向右移动的区域和按钮
9.
10. :increment
11. //increment伪类适⽤于按钮和轨道碎⽚。表⽰递增的按钮或轨道碎⽚，例如可以使区域向下或者向左移动的区域和按钮
12.
13. :start
14. //start伪类适⽤于按钮和轨道碎⽚。表⽰对象（按钮轨道碎⽚）是否放在滑块的前⾯
15.
16. :end
17. //end伪类适⽤于按钮和轨道碎⽚。表⽰对象（按钮轨道碎⽚）是否放在滑块的后⾯
18.
19. :double-button
20. //double-button伪类适⽤于按钮和轨道碎⽚。判断轨道结束的位置是否是⼀对按钮。也就是轨道碎⽚紧挨着⼀对在⼀起的按钮。
21.
22. :single-button
23. //single-button伪类适⽤于按钮和轨道碎⽚。判断轨道结束的位置是否是⼀个按钮。也就是轨道碎⽚紧挨着⼀个单独的按钮。
24.
25. :no-button
26. no-button伪类表⽰轨道结束的位置没有按钮。
27.
28. :corner-present
29. //corner-present伪类表⽰滚动条的⾓落是否存在。
30.
31. :window-inactive
32. //适⽤于所有滚动条，表⽰包含滚动条的区域，焦点不在该窗⼝的时候。
33.
34. ::-webkit-scrollbar-track-piece:start {
35. /*滚动条上半边或左半边*/
36. }
37.
38. ::-webkit-scrollbar-thumb:window-inactive {
39. /*当焦点不在当前区域滑块的状态*/
40. }
41.
42. ::-webkit-scrollbar-button:horizontal:decrement:hover {
43. /*当⿏标在⽔平滚动条下⾯的按钮上的状态*/
44. }
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3⾃定义滚动条-轩枫阁</title>
<style>
header
{
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
#info
{
font-size: 18px;
color: #555;
text-align: center;
margin-bottom: 25px;
}
a{
color: #074E8C;
}
.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow
{
min-height: 450px;
css鼠标点击样式
}
#wrapper
{
text-align: center;
width: 500px;
margin: auto;
}
/*
* STYLE 1
*/
#style-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555;
}
/*
* STYLE 2
*/
#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #D62929;
}
* STYLE 3
*/
#style-3::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar-thumb
{
background-color: #000000;
}
/*
* STYLE 4
*/
#style-4::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar-thumb
{
background-color: #000000;
border: 2px solid #555555;
}
/
*
* STYLE 5
*/
#style-5::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-5::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-5::-webkit-scrollbar-thumb
{
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.5, transparent), to(transparent)); }
/*
* STYLE 6
*/
#style-6::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-6::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
#style-6::-webkit-scrollbar-thumb
{
background-color: #F90;
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%,
transparent)
}
/*
* STYLE 7
*/
#style-7::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-7::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-7::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-image: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0.44, rgb(122,153,217)), color-stop(0.72, rgb(73,125,189)), color-stop(0.86, rgb(28,58,148))); }
/*
* STYLE 8
*/
#style-8::-webkit-scrollbar-track
{
border: 1px solid black;
background-color: #F5F5F5;
}
#style-8::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-8::-webkit-scrollbar-thumb
{
background-color: #000000;
}
/
*
* STYLE 9
*/
#style-9::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-9::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-9::-webkit-scrollbar-thumb
{
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论