CSS自定义滚动条样式_webkit-scrollbar

前端技术 - CSS

一帘幽梦 2017-9-29 9:17:04

有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了。那webkit浏览器是如何自定义滚动条的呢?

前言

webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是不存在的。

滚动条组成

webkit浏览器的滚动条组成如图所示:

webkit浏览器滚动条组成
webkit浏览器滚动条组成

webkit浏览器的滚动条各部分的含义如下:

  • ::-webkit-scrollbar //滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。(位置1)
  • ::-webkit-scrollbar-button //滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。(位置2)
  • ::-webkit-scrollbar-track  // 外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果(位置3)
  • ::-webkit-scrollbar-track-piece  //内层轨道,滚动条中间部分(位置4)
  • ::-webkit-scrollbar-thumb //滚动条里面可以拖动的那部分(位置5)
  • ::-webkit-scrollbar-corner //边角(位置6)
  • ::-webkit-resizer //定义右下角拖动块的样式(位置7)

简单设置

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 16px;  
    height: 16px;  
    background-color: #F5F5F5;  
}  
  
/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #F5F5F5;  
}  
  
/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #555;  
}  

详细设置

定义滚动条就是利用伪元素与伪类,那什么是伪元素和伪类呢?

伪类大家应该很熟悉:link,:focus,:hover,此外CSS3中又增加了许多伪类选择器,如:nth-child,:last-child,:nth-last-of-type()等。

CSS中的伪元素大家以前看过::first-line,:first-letter,:before,:after。那么在CSS3中,伪元素进行了调整,在以前的基础上增加了一个“:”也就是现在变成了“::first-letter,::first-line,::before,::after”,另外CSS3还增加了一个“::selection”。两个“::”和一个“:”在css3中主要用来区分伪类和伪元素。

webkit的伪类和伪元素的实现很强,可以把滚动条当成一个页面元素来定义,再结合一些高级的CSS3属性,比如渐变、圆角、RGBa等等。然后如果有些地方要用图片,可以把图片也可以转换成Base64,不然每次都得加载那个多个图片,增加请求数。

任何对象都可以设置:边框、阴影、背景图片等等,创建的滚动条任然会按照操作系统本身的设置来完成其交互的行为。下面的伪类可以应用到上面的伪元素中。有点小复杂,具体怎么写可以看第一个demo,那里也有注释。

:horizontal  
//horizontal伪类适用于任何水平方向上的滚动条  
  
:vertical  
//vertical伪类适用于任何垂直方向的滚动条  
  
:decrement  
//decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片,例如可以使区域向上或者向右移动的区域和按钮  
  
:increment  
//increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片,例如可以使区域向下或者向左移动的区域和按钮  
  
:start  
//start伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的前面,即滚动条前面的那个上箭头  
  
:end  
//end伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的后面 ,即滚动条前面的那个下箭头 
  
:double-button  
//double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。  
  
:single-button  
//single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。  
  
:no-button  
no-button伪类表示轨道结束的位置没有按钮。  
  
:corner-present  
//corner-present伪类表示滚动条的角落是否存在。  
  
:window-inactive  
//适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候。  
  
::-webkit-scrollbar-track-piece:start {  
/*滚动条上半边或左半边*/  
}  
  
::-webkit-scrollbar-thumb:window-inactive {  
/*当焦点不在当前区域滑块的状态*/  
}  
  
::-webkit-scrollbar-button:horizontal:decrement:hover {  
/*当鼠标在水平滚动条下面的按钮上的状态*/  
}  

详细实例

CSS代码

<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;
}
#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
{
	background-color: #F90;	
	background-image: -webkit-linear-gradient(90deg,
	                                          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 10
 */
#style-10::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}
#style-10::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}
#style-10::-webkit-scrollbar-thumb
{
	background-color: #AAA;
	border-radius: 10px;
	background-image: -webkit-linear-gradient(90deg,
	                                          rgba(0, 0, 0, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(0, 0, 0, .2) 50%,
											  rgba(0, 0, 0, .2) 75%,
											  transparent 75%,
											  transparent)
}
/*
 *  STYLE 11
 */
#style-11::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}
#style-11::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}
#style-11::-webkit-scrollbar-thumb
{
	background-color: #3366FF;
	border-radius: 10px;
	background-image: -webkit-linear-gradient(0deg,
	                                          rgba(255, 255, 255, 0.5) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, 0.5) 50%,
											  rgba(255, 255, 255, 0.5) 75%,
											  transparent 75%,
											  transparent)
}
/*
 *  STYLE 12
 */
#style-12::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
	border-radius: 10px;
	background-color: #444444;
}
#style-12::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}
#style-12::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #D62929;
	background-image: -webkit-linear-gradient(90deg,
											  transparent,
											  rgba(0, 0, 0, 0.4) 50%,
											  transparent,
											  transparent)
}
/*
 *  STYLE 13
 */
#style-13::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
	border-radius: 10px;
	background-color: #CCCCCC;
}
#style-13::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}
#style-13::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #D62929;
	background-image: -webkit-linear-gradient(90deg,
											  transparent,
											  rgba(0, 0, 0, 0.4) 50%,
											  transparent,
											  transparent)
}
/*
 *  STYLE 14
 */
#style-14::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
	background-color: #CCCCCC;
}
#style-14::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}
#style-14::-webkit-scrollbar-thumb
{
	background-color: #FFF;
	background-image: -webkit-linear-gradient(90deg,
	                                          rgba(0, 0, 0, 1) 0%,
											  rgba(0, 0, 0, 1) 25%,
											  transparent 100%,
											  rgba(0, 0, 0, 1) 75%,
											  transparent)
}
/*
 *  STYLE 15
 */
#style-15::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #F5F5F5;
	border-radius: 10px;
}
#style-15::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}
#style-15::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #FFF;
	background-image: -webkit-gradient(linear,
									   40% 0%,
									   75% 84%,
									   from(#4D9C41),
									   to(#19911D),
									   color-stop(.6,#54DE5D))
}
/*
 *  STYLE 16
 */
#style-16::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #F5F5F5;
	border-radius: 10px;
}
#style-16::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}
#style-16::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #FFF;
	background-image: -webkit-linear-gradient(top,
											  #e4f5fc 0%,
											  #bfe8f9 50%,
											  #9fd8ef 51%,
											  #2ab0ed 100%);
}
</style>

HTML代码

<div id="wrapper">
	    <div class="scrollbar" id="style-default">
	      <div class="force-overflow"></div>
	    </div>
	    <div class="scrollbar" id="style-1">
	      <div class="force-overflow"></div>
	    </div>
	    <div class="scrollbar" id="style-2">
	      <div class="force-overflow"></div>
	    </div>
	    <div class="scrollbar" id="style-3">
	      <div class="force-overflow"></div>
	    </div>
	    <div class="scrollbar" id="style-4">
	      <div class="force-overflow"></div>
	    </div>
	    <div class="scrollbar" id="style-5">
	      <div class="force-overflow"></div>
	    </div>
	    <div class="scrollbar" id="style-6">
	      <div class="force-overflow"></div>
	    </div>
	    <div class="scrollbar" id="style-7">
	      <div class="force-overflow"></div>
	    </div>
	    <div class="scrollbar" id="style-8">
	      <div class="force-overflow"></div>
	    </div>
	    <div class="scrollbar" id="style-9">
	      <div class="force-overflow"></div>
	    </div>
	    <div class="scrollbar" id="style-10">
	      <div class="force-overflow"></div>
	    </div>
	    <div class="scrollbar" id="style-11">
	      <div class="force-overflow"></div>
	    </div>
	    <div class="scrollbar" id="style-13">
	      <div class="force-overflow"></div>
	    </div>
	    <div class="scrollbar" id="style-14">
	      <div class="force-overflow"></div>
	    </div>
	    <div class="scrollbar" id="style-15">
	      <div class="force-overflow"></div>
	    </div>
	</div>

运行效果

以上不同风格的滚动条样式的运行效果如下:

返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验